react单向数据流，控制页面变化的只有数据的改变
控制页面变化的数据：state 和 props
props.jpg

state和 props的区别

  1. props是组件对外的接口，用户组件之间的数据传递
    1. 例如：父子组件，兄弟组件
  2. state是组件内的数据，管理组件内的数据改变，仅限于当前的组件
  3. state是组件私有的属性
    1. 修改 state只能用 this.setState()来修改，响应数据的变化
    2. 直接修改 state，组件不会触发 render函数，重新渲染 ```jsx // 重新渲染，触发 componentDidUpdate this.setState({visible: true})

// 错误的用户，页面不会重新渲染，不会触发 componentDidUpdate this.state.visible = true

  2. React 组件里 setState 是要创建新的 state 对象的<br />function 组件的 state 对象变了就会重新渲染
  4. - 普通的 Component class 组件，setState 就会重新渲染
  5. - 继承 PureComponent 的 class 组件，setState 时会对比 props 和 state 本身变没变，还会对比 state 的每个 key 的值变没变，变了才会重新渲染
  6. - function 组件在用 useState 的 setXxx 时，会对比 state 本身变没变，变了就会重新渲染

const newState = this.state.set(‘a.b’, 2); this.setState(newState);

  1. immer 没有自己的数据结构，通过 Proxy 实现了代理，内部自动创建新的对象
  3. <a name="s27Wa"></a>
  4. ## state状态
  6. 1. 构造函数 constructor是 唯一可以 初始化 state的
  7. 2. 调用 this.setState后，state不会立刻改变
  8.    1. state默认是异步操作，不要依赖当前的 state，去计算下一个 state
  9.    2. 多个 setState会合并成一个 setState
  11. ```jsx
  12. constructor(props) {
  13.     super(props)
  15.   this.state = {
  16.       data: [],
  17.     value: 100
  18.   }
  19. }

正确的修改 state

  1. this.setState({}, () => {})
  3. this.setState(state => {})

props属性

  1. props是 properties的缩写
  2. props就是传入函数的参数，是传入组件内部的数据
  3. 从父组件传递向子组件的数据

props细节

  1. props不能传递 key属性
  2. props属性都是只读的，immutable
    1. 对象一旦创建，就不能改变；只能通过销毁，新建来改变数据
    2. 可以判断对象的内存地址是否一致，来确认对象是否修改过
    3. 在 componentDidUpdate时判断对象是不是同一个
  3. immutable思想
    1. Immutable.js
    2. Redux
    3. Observable RxJS