浅谈React构建项目的思考过程

红太狼 2022-06-16 05:09 316阅读 0赞

1、第一步：把UI拆分为一个组件的层级

一个独立的组件的标准：单一功能原则——一个组件在理想情况下只做一件事情。如果它要做的事情不止一件，它就应该被分解为更小的组件。

组件拆分至关重要，因为拆分粒度过大不利于组件化的重用，粒度过小则会显得冗余过多，且复杂度过高。

2、第二步：用React创建一个静态版本

要构建渲染数据模型的可重用组件库，首先构建一个静态版本的组件，静态版本的组件利用 props 传递数据。props 是一种从父级传递数据到子级的方式（state仅仅是为具有互动性，也即随时间变化的数据所预留的，静态版本还不需要用到state）。

可以自顶向下或自底向上的构建组件，在较简单的例子里，通常自顶向下要容易些，然而在更大的项目上，自底向上地构建更容易，并且更便于伴随着构建写测试。

由于是静态版本，组件只有 render() 方法。在层级顶端的组件将会接受数据模型，并将其作为一个prop，如果改变了底层数据模型，并再次调用 React.render() ，UI将会更新。React的单向数据流（单向绑定）的优点是：模块化和快速。

3、第三步：确定最小但完备的state

要让UI互动，需要触发底层数据模型发生变化，React用 state 来让UI互动变得容易。

要正确构建app，首先需要思考app需要的state的最小组，思考的依据如下：

①　是通过props从父级传递来的吗？如果是，它可能不是 state。

②　随时间变化吗？如果不是，它可能不是 state。

③　能基于其他任何组件里的state或props计算出吗？如果是，它可能不是state。

有关React的state和props的介绍请见：[http://blog.csdn.net/zhouziyu2011/article/details/70741653][http_blog.csdn.net_zhouziyu2011_article_details_70741653]

4、第四步：确定state应该存在于哪里

确定好最小（但完备）的state后，接下来需要确定哪个组件可以改变或拥有state，确定方法如下：

①　确定哪些组件要基于state来渲染内容。

②　在所有需要基于state来渲染内容的组件层次之上，找出共有的单一组件。

③　要么是共有的单一组件，要么是其他在层级里更高级的组件应该拥有state。

④　如果不能找到一个组件让其拥有state，可以简单地创建一个新的组件让其拥有state，并把它添加到比共有的单一组件更高的层级上。

5、第五步：添加反向数据流

在层级深处的子组件需要更新 父组件里的state时，React 提供了一个 ReactLink 插件来实现双向数据绑定。

备注：理解React构建项目的思考过程可以参考——

React实现输入框：[http://blog.csdn.net/zhouziyu2011/article/details/70755812][http_blog.csdn.net_zhouziyu2011_article_details_70755812]

React实现过滤器：[http://blog.csdn.net/zhouziyu2011/article/details/70767636][http_blog.csdn.net_zhouziyu2011_article_details_70767636]

[http_blog.csdn.net_zhouziyu2011_article_details_70741653]: http://blog.csdn.net/zhouziyu2011/article/details/70741653
[http_blog.csdn.net_zhouziyu2011_article_details_70755812]: http://blog.csdn.net/zhouziyu2011/article/details/70755812
[http_blog.csdn.net_zhouziyu2011_article_details_70767636]: http://blog.csdn.net/zhouziyu2011/article/details/70767636