Thinking in React

本文翻译自React的官方博客，详情请阅读原文。

React非常适合构建组件化的应用，它注重高性能，因此组建的重用，项目的扩展都十分灵活，Facebook和instagram的不少商业项目使用了此框架。

本文主要通过“输入查询数据”这个简单的demo来说明或者学习如何用React来架构。

数据模型

我们需要根据JSON API来显示并且操作数据，最终的可视化操作是基于JSON数据的基础之上。最终的效果图如下：

以下便是我们模拟的JSON数据：

[
  {category: "Sporting Goods", price: "$49.99", stocked: true, name: "Football"},
  {category: "Sporting Goods", price: "$9.99", stocked: true, name: "Baseball"},
  {category: "Sporting Goods", price: "$29.99", stocked: false, name: "Basketball"},
  {category: "Electronics", price: "$99.99", stocked: true, name: "iPod Touch"},
  {category: "Electronics", price: "$399.99", stocked: false, name: "iPhone 5"},
  {category: "Electronics", price: "$199.99", stocked: true, name: "Nexus 7"}
];

step1 变UI为组件继承

我们如何确定哪一部分应该为一个组件呢？我们可以遵循“单一职责”原则，也就是说，理想的组件只做一件事情。组件也应该根据数据（model）的结构灵活进行设计，这样最终的UI匹配提供的数据（model），利于维护和理解。

如上图所示，我们将这个应用分为5个组件。

  1. FilterableProductTable (orange): 包含所有的子组件，是个容器
  2. SearchBar (blue): 用于用户输入交互
  3. ProductTable (green): 呈现数据项并根据用户输入过滤数据
  4. ProductCategoryRow (turquoise): 显示条目信息
  5. ProductRow (red): 显示产品的具体信息

我们可以看到，tHead部分（Name和Price）并不是一个单独的组件，在这个例子中，之所以tHead属于ProductTable组件是因为它并没有与数据（model）有关联，考虑这种情况，如果要单击tHead部分的表头实现表格内容的排列，我们最好为tHead单独设计一个组件，并在该组件上绑定事件处理函数。

至此，我们将这五个组件的继承关系确定下来：

  • FilterableProductTable

    • SearchBar
    • ProductTable
      • ProductCategoryRow
      • ProductRow

step2 创建静态版本

有了组件的继承关系，我们首先创建一个静态版本的应用。我们可以通过组件复用以及父子组件之间的props通信来完成模型数据的渲染。props是父子组件通信的一种方式，如果你也了解state特性的话，那么一定不要使用state来构建静态版本，state用于创建交互版本，也就是说，state中的数据会随着时间而改变，下面的一节会讲解何时将数据放入state中。

我们可以自顶向下或者自下而上来构建应用，在做测试时我们可以自下而上来进行每个模块的测试，而一般构建应用我们则是采用自顶向下的模式，结合数据的自上而下传递，利于开发。

在这一步，由于我们构建的是静态版本，因此每个组件只实现了其render方法，用以基本的数据渲染。最顶层的组件（FilterableProductTable）的props中存入要渲染的数据模型，每当模型数据发生改变时，会对应的视图层的改变，这也正是React所提出的的单向数据流模型（one-way data flow）。

在React中，组件有两种类型数据--props和state。它们之间的具体区别可以参考官方文档。

var ProductCategoryRow = React.createClass({
    render: function() {
        return (<tr><th colSpan="2">{this.props.category}</th></tr>);
    }
});

var ProductRow = React.createClass({
    render: function() {
        var name = this.props.product.stocked ?
            this.props.product.name :
            <span style={{color: ‘red‘}}>
                {this.props.product.name}
            </span>;
        return (
            <tr>
                <td>{name}</td>
                <td>{this.props.product.price}</td>
            </tr>
        );
    }
});

var ProductTable = React.createClass({
    render: function() {
        var rows = [];
        var lastCategory = null;
        this.props.products.forEach(function(product) {
            if (product.category !== lastCategory) {
                rows.push(<ProductCategoryRow category={product.category} key={product.category} />);
            }
            rows.push(<ProductRow product={product} key={product.name} />);
            lastCategory = product.category;
        });
        return (
            <table>
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Price</th>
                    </tr>
                </thead>
                <tbody>{rows}</tbody>
            </table>
        );
    }
});

var SearchBar = React.createClass({
    render: function() {
        return (
            <form>
                <input type="text" placeholder="Search..." />
                <p>
                    <input type="checkbox" />
                    {‘ ‘}
                    Only show products in stock
                </p>
            </form>
        );
    }
});

var FilterableProductTable = React.createClass({
    render: function() {
        return (
            <div>
                <SearchBar />
                <ProductTable products={this.props.products} />
            </div>
        );
    }
});

var PRODUCTS = [
  {category: ‘Sporting Goods‘, price: ‘$49.99‘, stocked: true, name: ‘Football‘},
  {category: ‘Sporting Goods‘, price: ‘$9.99‘, stocked: true, name: ‘Baseball‘},
  {category: ‘Sporting Goods‘, price: ‘$29.99‘, stocked: false, name: ‘Basketball‘},
  {category: ‘Electronics‘, price: ‘$99.99‘, stocked: true, name: ‘iPod Touch‘},
  {category: ‘Electronics‘, price: ‘$399.99‘, stocked: false, name: ‘iPhone 5‘},
  {category: ‘Electronics‘, price: ‘$199.99‘, stocked: true, name: ‘Nexus 7‘}
];

React.render(<FilterableProductTable products={PRODUCTS} />, document.body);

step3 确定组件的state

为了使应用具有动态交互性，必须将状态的改变（用户的输入或者单击操作等）反映到我们的UI上，通过React给组件提供的state完成上述需求。

我们首先要确定应用的可变的状态集合，遵循DRY原则：don‘t repeat youself。我们需要考虑应用中的所有的数据，它包括：

  • 基本的产品列表
  • 用户输入的过滤条件
  • checkbox的值
  • 过滤后的产品列表

根据下面条件选择哪些数据可以作为state：

  1. 是否通过父组件通过props传递，如果是，则不是state
  2. 是否随着时间而改变，如果不变，则不是state
  3. 可以通过其他state或者props计算得到，如果可以，则不是state

产品数据列表是通过父组件的props传递，因此不是state，用户输入和checkbox满足上述三个条件，可以作为state，二对于过滤的列表，则可以根据产品数据和用户输入来获取到，因此不是state。

故，input输入值和checkbox的值可以作为state。

step4 确定state所属的组件

目前确定了state集合，接下来需要确定究竟是哪个组件拥有这个state，或者随着state而变化。

我们要明确React的单项数据流是沿着组件继承链流动的，这有时很难确定哪一个组件拥有这个state，不过我们可以根据以下原则来大体确定state所属的组件。

在每一个状态期，

  • 确保每个组件都会根据当前状态来渲染
  • 寻找其共同的祖先组件
  • 在继承链中层级较高的组件拥有state

回到我们的应用中，

  • ProductTable需要根据state来过滤数据，SearchBar需要显示输入的文字和选项.
  • 这两个组件的共同祖先是 FilterableProductTable.
  • 因此state的集合应该所属FilterableProductTable组件

所以，我们确定了state所属的组件是FilterableProductTable。我们需要给该组件设置getInitialState方法设置组件的初始状态，并且通过props将状态传递给ProductTable和SearchBar，最后我们就可以在ProductTable和SearchBar中获取状态并根据当前状态显示相应的数据。

var ProductCategoryRow = React.createClass({
    render: function() {
        return (<tr><th colSpan="2">{this.props.category}</th></tr>);
    }
});

var ProductRow = React.createClass({
    render: function() {
        var name = this.props.product.stocked ?
            this.props.product.name :
            <span style={{color: ‘red‘}}>
                {this.props.product.name}
            </span>;
        return (
            <tr>
                <td>{name}</td>
                <td>{this.props.product.price}</td>
            </tr>
        );
    }
});

var ProductTable = React.createClass({
    render: function() {
        var rows = [];
        var lastCategory = null;
        this.props.products.forEach(function(product) {
            if (product.name.indexOf(this.props.filterText) === -1 || (!product.stocked && this.props.inStockOnly)) {
                return;
            }
            if (product.category !== lastCategory) {
                rows.push(<ProductCategoryRow category={product.category} key={product.category} />);
            }
            rows.push(<ProductRow product={product} key={product.name} />);
            lastCategory = product.category;
        }.bind(this));
        return (
            <table>
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Price</th>
                    </tr>
                </thead>
                <tbody>{rows}</tbody>
            </table>
        );
    }
});

var SearchBar = React.createClass({
    render: function() {
        return (
            <form>
                <input type="text" placeholder="Search..." value={this.props.filterText} />
                <p>
                    <input type="checkbox" checked={this.props.inStockOnly} />
                    {‘ ‘}
                    Only show products in stock
                </p>
            </form>
        );
    }
});

var FilterableProductTable = React.createClass({
    getInitialState: function() {
        return {
            filterText: ‘‘,
            inStockOnly: false
        };
    },

    render: function() {
        return (
            <div>
                <SearchBar
                    filterText={this.state.filterText}
                    inStockOnly={this.state.inStockOnly}
                />
                <ProductTable
                    products={this.props.products}
                    filterText={this.state.filterText}
                    inStockOnly={this.state.inStockOnly}
                />
            </div>
        );
    }
});

var PRODUCTS = [
  {category: ‘Sporting Goods‘, price: ‘$49.99‘, stocked: true, name: ‘Football‘},
  {category: ‘Sporting Goods‘, price: ‘$9.99‘, stocked: true, name: ‘Baseball‘},
  {category: ‘Sporting Goods‘, price: ‘$29.99‘, stocked: false, name: ‘Basketball‘},
  {category: ‘Electronics‘, price: ‘$99.99‘, stocked: true, name: ‘iPod Touch‘},
  {category: ‘Electronics‘, price: ‘$399.99‘, stocked: false, name: ‘iPhone 5‘},
  {category: ‘Electronics‘, price: ‘$199.99‘, stocked: true, name: ‘Nexus 7‘}
];

React.render(<FilterableProductTable products={PRODUCTS} />, document.body);

step5 添加反向数据流

等等，目前构建的应用并不能通过表单来反向设置state，因此，我们无法再input标签输入任何值。这就需要我们手动进行反向数据设置。React默认的单项数据流是从model渲染到UI，而通过UI来设置model则需要手动编写，主要的操作就是通过获取组件对应的DOM对象，获取当前DOM的属性值并反向设置state来完成。

当前版本的应用，React会忽略输入值和选定值，这是理所当然的，因为我们在FilterableProductTable中设置的state初始值为filterText=‘’，inStockOnly=false，所以对于ProductTable和SearchBar而言，也就是针对这两个值渲染，但是由于通过input和checkbox的输入并未改变这两个state的值，因此，这两个组件其实并没有被渲染。

所以我们通过在ProductTable和SearchBar设置事件监听函数，并且每当函数触发时setState当前的状态，促使组件渲染重绘，完成数据的动态呈现。在具体实现中，可以通过refs锚点来获取具体的具名组件，并通过调用组件的getDOMNode方法，获取对于DOM对象并据此设置新的state。

/** @jsx React.DOM */

var ProductCategoryRow = React.createClass({
    render: function() {
        return (<tr><th colSpan="2">{this.props.category}</th></tr>);
    }
});

var ProductRow = React.createClass({
    render: function() {
        var name = this.props.product.stocked ?
            this.props.product.name :
            <span style={{color: ‘red‘}}>
                {this.props.product.name}
            </span>;
        return (
            <tr>
                <td>{name}</td>
                <td>{this.props.product.price}</td>
            </tr>
        );
    }
});

var ProductTable = React.createClass({
    render: function() {
        console.log(this.props);
        var rows = [];
        var lastCategory = null;
        this.props.products.forEach(function(product) {
            if (product.name.indexOf(this.props.filterText) === -1 || (!product.stocked && this.props.inStockOnly)) {
                return;
            }
            if (product.category !== lastCategory) {
                rows.push(<ProductCategoryRow category={product.category} key={product.category} />);
            }
            rows.push(<ProductRow product={product} key={product.name} />);
            lastCategory = product.category;
        }.bind(this));
        return (
            <table>
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Price</th>
                    </tr>
                </thead>
                <tbody>{rows}</tbody>
            </table>
        );
    }
});

var SearchBar = React.createClass({
    handleChange: function() {
        this.props.onUserInput(
            this.refs.filterTextInput.getDOMNode().value,
            this.refs.inStockOnlyInput.getDOMNode().checked
        );
    },
    render: function() {
        return (
            <form>
                <input
                    type="text"
                    placeholder="Search..."
                    value={this.props.filterText}
                    ref="filterTextInput"
                    onChange={this.handleChange}
                />
                <p>
                    <input
                        type="checkbox"
                        checked={this.props.inStockOnly}
                        ref="inStockOnlyInput"
                        onChange={this.handleChange}
                    />
                    {‘ ‘}
                    Only show products in stock
                </p>
            </form>
        );
    }
});

var FilterableProductTable = React.createClass({
    getInitialState: function() {
        return {
            filterText: ‘‘,
            inStockOnly: false
        };
    },

    handleUserInput: function(filterText, inStockOnly) {
        this.setState({
            filterText: filterText,
            inStockOnly: inStockOnly
        });
    },

    render: function() {
        return (
            <div>
                <SearchBar
                    filterText={this.state.filterText}
                    inStockOnly={this.state.inStockOnly}
                    onUserInput={this.handleUserInput}
                />
                <ProductTable
                    products={this.props.products}
                    filterText={this.state.filterText}
                    inStockOnly={this.state.inStockOnly}
                />
            </div>
        );
    }
});

var PRODUCTS = [
  {category: ‘Sporting Goods‘, price: ‘$49.99‘, stocked: true, name: ‘Football‘},
  {category: ‘Sporting Goods‘, price: ‘$9.99‘, stocked: true, name: ‘Baseball‘},
  {category: ‘Sporting Goods‘, price: ‘$29.99‘, stocked: false, name: ‘Basketball‘},
  {category: ‘Electronics‘, price: ‘$99.99‘, stocked: true, name: ‘iPod Touch‘},
  {category: ‘Electronics‘, price: ‘$399.99‘, stocked: false, name: ‘iPhone 5‘},
  {category: ‘Electronics‘, price: ‘$199.99‘, stocked: true, name: ‘Nexus 7‘}
];

React.render(<FilterableProductTable products={PRODUCTS} />, document.body);

对，就是这样

例子虽然非常简单，但是里面蕴含的思想确实值得玩味。组件的设计，数据的传递，状态集的确定，双向数据的传递以及事件处理和获取具名组件等等技术都包含在内，如果真的吃透了这个例子，那么我想在今后的可重用敏捷开发之路上必定又有新的收获，具体到我们的实现上就是组件设计的更为优美，代码量更为精少。

时间： 2024-08-26 18:16:37

Thinking in React的相关文章

谈谈APP架构选型：React Native还是HBuilder

原文链接 导读:最近公司的一款新产品APP要进行研发,老大的意思想用H5来做混合APP以达到高效敏捷开发的目的.我自然就开始进行各种技术选型的调研,这里重点想说的是我最后挑选出的2款hybrid app开发技术方案:RN(react native),HBuilder.React Native是大名鼎鼎的Facebook的开源技术框架,而HBuilder是国内的H5工具开发公 司DCLOUD的产品.我自己先总结下吧:这两个技术框架在开发效率上基本上可以媲美WEB开发的速度,RN强调的是“Learn

React学习—组件

一.定义 组件就像JavaScript的函数.组件可以接收任意输入(称为"props"), 并返回 React 元素,用以描述屏幕显示内容. 二.组件的分类 1.函数式组件(无状态组件) 它是为了创建纯展示组件,这种组件只负责根据传入的props来展示,不涉及到要state状态的操作.在大部分React代码中,大多数组件被写成无状态的组件,通过简单组合可以构建成其他的组件等:这种通过多个简单然后合并成一个大应用的设计模式被提倡. function Welcome(props) { re

如何写好react组件

react 组件方面: 总结 React 组件的三种写法 及最佳实践 [涨经验] React组件编写思路(一) 使用react-router实现单页面应用时设置页面间过渡的两种方式 [翻译]基于 Create React App路由4.0的异步组件加载(Code Splitting) React进阶--使用高阶组件(Higher-order Components)优化你的代码 Higher-order Components 高阶组件 redux方面: Redux-saga 中文文档 https:

react Native如何实现跨平台

react Native是通过虚拟DOM实现跨平台,运行时 将虚拟DOM转换为相应的web编码.android编号.ios编码进行运行的.   代码实现: 01.html: <!DOCTYPE html> <html lang="en"> <head>    <meta charset="UTF-8">    <script src="react.js"></script> 

ReactJS React+Redux+Router+antDesign通用高效率开发模板，夜间模式为例

工作比较忙,一直没有时间总结下最近学习的一些东西,为了方便前端开发,我使用React+Redux+Router+antDesign总结了一个通用的模板,这个技术栈在前端开发者中是非常常见的. 总的来说,我这个工程十分便捷,对于初学者来说,可能包含到以下的一些知识点: 一.React-Router的使用 Router是为了方便管理组件的路径,它使用比较简单,一般定义如下就行,需要注意的是,react-router的版本有1.0-3.0,各个版本对应的API大致相似,但也有不同,我使用的是2.X的,

React核心内容归纳总结

状态.属性.组件API.组件的生命周期 当react的状态改变时,自动执行this.render()方法更新组件ES6写React的时候,事件里不会自动绑定this,需要自己绑定,或者直接在constructor里写方法 constructor(props) { super(props); this.state = { liked: false }; this.handleClick = (e) => { this.setState({liked: !this.state.liked}); };

react中createFactory, createClass, createElement分别在什么场景下使用，为什么要这么定义？

作者:元彦链接:https://www.zhihu.com/question/27602269/answer/40168594来源:知乎著作权归作者所有,转载请联系作者获得授权. 三者用途稍有不同,按依赖关系调整下顺序:1. createClass,如其名就是创建React组件对应的类,描述你将要创建组件的各种行为,其中只有当组件被渲染时需要输出的内容的render接口是必须实现的,其他都是可选: var Hello = React.createClass({ render: function(

REACT 学习

1.React/React Native 的ES5 ES6写法对照表 http://bbs.reactnative.cn/topic/15/react-react-native-%E7%9A%84es5-es6%E5%86%99%E6%B3%95%E5%AF%B9%E7%85%A7%E8%A1%A8 2.

菜鸟窝React Native 视频系列教程

菜鸟窝React Native 视频系列教程 交流QQ群:576089067 Hi,我是RichardCao,现任新美大酒店旅游事业群的Android Developer.15年加入饿了么即时配送BU,后负责蜂鸟众包Android端,期间引入react-native技术,作为国内react-native 与 Android混合开发的早期商业项目,具有一定经验,同时也是react-native开源项目reading(https://github.com/attentiveness/reading)

菜鸟窝React Native 系列教程-1.移动端开发趋势与未来

菜鸟窝React Native 系列教程-1.移动端开发趋势与未来 课程持续更新中..... 我是RichardCao,现任新美大酒店旅游事业群的Android Developer.如果你也有兴趣录制RN视频,请加入下面QQ群找我. 下载地址:https://pan.baidu.com/s/1c1XmE56 密码:shhw 首发地址:菜鸟窝-ReactNative学习板块 交流QQ群:576089067 课程目录:菜鸟窝React Native 系列教程