刚从JQ转向React进行开发的时候，领导和我说了一句话 “React组件的数据，是谁持有，谁消费”。其实当时并不明白这句话什么意思。现在对照JQ，把理解写下来。有错漏请看官指出。
React中最重要的两个概念就是props和state。props是指父组件传递下来的属性（props可以是一个任意类型的数据），state是组件本身自我管理的状态。组件如何进行自我管理state，还有如何利用props，就成了初步使用react的第一个问题。
首先必须明确的一点是在React中，数据只能单向的从父组件中传递给子组件。如果子组件想要把数据传递给父组件，只能通过props回调。即 props是一个方法，子组件调用这个方法，可以把想要给父组件的数据通过参数传回去。
明白了以上三点，开始这篇的话题。
现在有个场景。参照antd的Table组件，如下图：
table.png
页面首次加载的时候，首先请求接口数据渲染表格。假设左上角的按钮修改了数据，会重新渲染表格。
组件划分是：
页面上有组件TableContainer，TableContainer包含左上角按钮，和Table组件（Button与Table未拆分）。
刚开发这个表格，我想的方案是：在页面componentWillMount中请求接口，将返回的数据通过props传递下去。存入子组件的state。Table渲染state数据。点击按钮后重新请求接口，将数据更新state。
这个思维方式被领导批评为仍然是JQ思想。按照我当时JQ的想法，按钮的事件中写好接口，然后接收数据。数据和页面无关。
比较合适的方案：
按钮组件和Table分离。数据是页面的，因此由页面处理。Button组件只负责通知页面要请求数据，具体这个发送等操作，还是由页面执行。Table组件只负责渲染。这就是所谓的“谁持有，谁消费”。
首次请求数据，将数据存入页面的state中，在render中读取state，通过props一层层传递给Table组件。同时定义好一个请求数据的方法（假设方法名为getTableData）。将这个方法通过props传递给按钮组件。Button的click事件中调用getTableData方法。click事件被触发，则数据重新被请求，更新页面state。传下来使table数据刷新。
第二种方案中，数据只在页面上操作，子组件只需要对数据进行渲染，不操作数据。即：所有的数据处理，都只在容器组件中处理。
至于为什么这么做，下一篇（你为什么需要componentShouldUpdate？）中解释。
网友评论