state 是 React 的核心 -> 状态 -> 数据池 -> 组件数据池 -> 状态（池 pool）

总结

如果想使用组件的时候，传入数据
- props 组件配置
如果是组件内部使用的数据
- state 私有数据（状态）
  state 的使用注意事项
必须使用 setState 方法来更改 state
多个 setState 是会合并调用
props 和 state 更新数据要谨慎，尽量避免直接依赖他们 ```jsx // 很有可能是在异步程序中更新 this.setState({ result: this.state.result + this.props.content })

// 应该这样来, 使用回调函数(同步的) this.setState((state, props) => { // state 上一个 state // props 此次更新时被使用的 props result: state.result + props.content })


4. setState 操作合并的原理是浅合并
```jsx
state = {
    obj: {},
  arr: []
}
$.ajax().then(res=>{
  this.setState({
      obj: res.obj
  })
});
$.ajax().then(res=>{
  this.setState({
      arr: res.arr
  })
})

拿 arr 来说，操作 setState 时会完全替换 arr (新的数组)，但保证 obj 是原来的引用。即 setState 哪个，就只替换哪个（存在优化）。
所以 setState 时应该传入一个新的引用。

this.state.arr = [1,2,3];
// 先来一个不建议的例子
this.state.arr.push(4);
this.setState({
    arr: this.state.arr
})
// 应该这样
this.setState({
    arr: [...this.state.arr, 4]
})
// 或者
this.state = { arr:[1,2,3] };
var newArr = this.state.arr.concat(4);
this.setState({
    arr: newArr
})

深刻的东西

组件无论如何都是不知道其他组件是否有状态的
组件也并不关心其它组件是函数组件还是类组件

state 是组件内部特有的数据墙头
其他组件是无法读写修改该组件的 state 的

组件可以通过其他组件调用的时候传入属性来传递 state 的值

class Title extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return <h1>{this.props.title}</h1>;
  }
}
class App extends React.Component {
  state = {
    title: "This is a title",
  };
  render() {
    return <Title title={this.state.title} />;
  }
}
ReactDOM.render(<App />, document.getElementById("app"));

props 虽然是响应式的，在组件内部是只读的
所以仍然无法修改其他组件的 state

这种数据（状态）从父到子，由上而下传递的这种方式叫做单向数据流

state 只能传递给自己的子组件
state 只能影响当前组件的UI或者内部下级组件的UI
state 的安全影响范围

render(){
    return (
    <div>
      <A>{this.state.a}</A>
      <B>{this.state.b}</B>
      <span>{this.state.a}</span>
    </div>
  );
}

组件可以没有状态
有没有状态组件间都不受嵌套影响
有无状态是可以切换

// 在点击中增加了状态
handleBtnClick () {
    this.state = {
  }
}
// 或者在生成周期函数中增加了状态

React 教程

state 与 setState、单向数据流

总结

state 的使用注意事项

深刻的东西