React修改子组件state

2020-12-30

封装组件，有时希望 React 能赋予组件一个初始值，但是不去控制后续更新，类似非受控组件概念。

子组件通过维护内部state来实现更新，当props发生变化时又可重新初始化子组件。这种情况较少，也不太符合React设计哲学。

不过的确会存在如此需求，比如最近使用的一个开源标签组件：

react-tag-input-component

    <div>
      <h1>Add Fruits</h1>
      <pre>{JSON.stringify(selected)}</pre>
      <TagsInput
        value={selected}
        onChange={setSelected}
        name="fruits"
        placeHolder="enter fruits"
      />
      <em>press enter or comma to add new tag</em>
    </div>

示例中组件属性value是初始化值，只生效一次，后续变化都由内部state控制。目前应该有问题，无法重新赋值新value，onChange更新state无实际作用，更准确些是defaultValue。

常见思路有三个，文末参考资料有详述。

  1. key销毁重载
  2. 子组件函数
  3. componentWillReceiveProps

一般直接用key方法，简单实用，除了大组件可能有一定性能问题，通常影响不大。react根据key来决定是销毁重新创建组件还是更新组件，原则是：

  • key相同，组件有所变化，react会只更新组件对应变化的属性。
  • key不同，组件会销毁之前的组件，将整个组件重新渲染。

调用子组件函数，不规范，不推荐使用。

React官方已不太推荐class式组件，componentWillReceiveProps更不建议，函数组件是大势所趋。

参考： https://www.cnblogs.com/xiaoxiao666/p/8423319.html

技术