2018-07-10 四种React组件存放数据的方式
感谢redux的出现，让组件之间数据的交互变得如此简单。但是所有数据都要放到redux里吗？That is a question。
其实，React组件有四种方式存放数据：1. state 2. this 3. static 4. store。state是react提供的特性。this和static是javascript的语言特性。store是redux提供的特性。
State
特性
当第一次接触react时，state就以它奇妙的功能吸引了我们。那就是当state改变时，会re-render组件。
使用环境
react 组件可以是继承自React.Component的class，也可以是function。而state是class才可以使用的特性。
作用范围
当数据不参与到dataflow中时，可以考虑将其放在state中。state中的数据只会影响到当前组件，除非你将state作为props传给子组件。
注意事项
- 不要直接修改state
// Wrong
this.state.comment = 'Hello';
// Correct
this.setState({comment: 'Hello'});
只可以在constructor中对state进行赋值。
- state的更新可能是异步的
// Wrong
this.setState({
counter: this.state.counter + this.props.increment,
});
// Correct
this.setState((prevState, props) => ({
counter: prevState.counter + props.increment
}));
- state的更新是可以合并的
constructor(props) {
super(props);
this.state = {
posts: [],
comments: []
};
}
changePost = ()=>{
this.setState({
posts: response.posts
});
}
changeComments = ()=>{
this.setState({
posts: response.posts
});
}
调用changePost方式时，不会对comments有任何影响，并且会对posts进行更新。
何时要用state
当组件的展示内容会随着改变时，可以将这相关数据放入到state中。也就是说涉及到组件到ui变化时，可以考虑state
This
特性
this上存放的数据的改变不会引起re-render组件。
使用环境
作为javascript语言特性之一，任何情况下都可以使用。
何时要用this
利用this来存放不会re-render的数据
关于this的二三件事
在javascript中有两种数据类型，基本类型和引用类型。在内存中，基本类型变量存放的就是对应的值，但是引用类型变量实际存放的是一个地址。
函数是引用类型，在下方的例子里，button上的this.handleClick 是一个地址，当被调用时，函数内部的this指向函数当前的运行环境。所以this 如果要指向定义时的环境，也就是Foo，需要绑定，可以通过bind或者箭头函数实现。
class Foo extends Component {
// Note: this syntax is experimental and not standardized yet.
handleClick = () => {
console.log（this）
console.log('Click happened');
}
render() {
return <button onClick={this.handleClick}>Click Me</button>;
}
}
Static
特性
直接通过class的名字访问，并且也不会引起re-render
作用范围
当前组件，同类型组件会共享这个数据。
何时要用static
像弹窗这类组件，理论上只会显示一个弹窗，这样同类型组件间的沟通可以借助static。
实例
react组件中，propTypes 和 defaultProps 可以提高代码可读性和组件强壮性。这两个属性就是static类型的。
static propTypes = {
onHide: PropTypes.func,
}
static defaultProps = {
animationDuration: 0,
}
Store
last but not least。
特性
感谢redux，使得组件间数据交流无障碍，让组件间的沟通变得如此简单。
作用范围
任意组件，这个特性非常方便。
何时要用Store
组件间的数据交互可以借助store来完成。
Store 二三事
关于store，相关的东西可多了去了。这里就关于数据的讲一些内容。
- 准确的说，store是存放数据的state和处理数据的一些方法的集合对象。其中state是只读的，只能通过store提供的方法修改，修改的方法也应该是纯函数，做到“有据可查”。
- store中是通过dispatch一个action，然后由reducer处理。
注意事项
SPA项目和Store的组合可能会在开发中给我们带来一些错觉。
因为SPA路由跳转时不用让浏览器刷新，所以存在Store中的数据会保存上个页面的数据，这样如果有一组数据是两组页面都要用，那么有可能在新页面中使用的是上一个页面的Store。这样如果刷新当前页面，那么这组数据都丢失了。
所以要保证每个页面都请求了这组数据，并且可以在开发时时常刷新，保证当前页面所需要的数据完整。
总结
本文中介绍了四种React存放数据的方式，大家可以根据数据的特性，以及数据传递的方式来选择合适的存放地点。
参考文献：
Where to Hold React Component Data: state, store, static, and this
JavaScript 的 this 原理
