子组件没有改变道具答案

【问题标题】：Child component doesn't get changed prop子组件没有改变道具
【发布时间】：2019-04-26 17:39:06
【问题描述】：

我有以下结构：

class Parent extends React.Component {

  componentDidMount() {
    document.addEventListener('keydown', () => {
      this.value++;
    })
  }

  this.value = 0;

  render() {
    return (<ChildComponent value={this.value} />)

ChildComponent 只是渲染值：

class ChildComponent extends Component {
  render() {
    return (
        <div>
            {this.props.value}
        </div>
    );
  }}

我不想在每个 KeyDown 事件上重新渲染父组件，这就是为什么我不给状态赋值。

我希望 ChildComponent 在每个 KeyDown 事件上重新渲染，但 ChildComponent 只渲染一次，因为它没有改变值并且总是显示 0，尽管 this.value 正在改变。

是否可以在更改 ParentComponent 的 this.value 时重新渲染 ChildComponent，或者我应该使用 setState 将逻辑放入 ChildComponent 以呈现正确的结果？

【问题讨论】：

如果不更新状态，您将无法在 Parent 上触发 render。我认为setState 是最好的方法。

标签： javascript reactjs

【解决方案1】：

您应该将值添加到父状态。这就是 React 的工作方式。即使您可以手动触发子组件的重新渲染，它仍然是 0，因为仍然提供了 0 道具。当 React 检测到 Parent 组件的状态发生变化时，它会计算所有子元素的虚拟 dom，对虚拟 dom 与真实 dom 进行比较，然后用这些值选择性地更新真实 dom（仅 Child 的内部文本组件 div 实际上是新的）。 React 为使用虚拟 dom 处理重新渲染进行了令人难以置信的优化，您不必担心这种情况下的性能损失。

【讨论】：

【解决方案2】：

当值改变时子组件没有被调用的原因是因为你覆盖了正常的变量值但没有反应组件状态。因此，为了在值更改时调用子组件，您需要管理父组件状态中的值属性，因此每当您使用 setState 修改它的值时，组件将重新渲染

改变

   class Parent extends React.Component {

     componentDidMount() {
         document.addEventListener('keydown', () => {
            this.value++;
         })
    }

     this.value = 0;

     render() {
          return (<ChildComponent value={this.value} />) 
     }
   }

到

  class Parent extends React.Component {
      constructor(props){
           super(props);
           this.state = {
                 value: 0
           }
      }
    componentDidMount() {
        document.addEventListener('keydown', () => {
             this.setState({value: this.state.value++});
        })
    }

     render() {
          return (<ChildComponent value={this.state.value} />) 
     }
   }

【讨论】：