当父级状态发生变化时，如何在 React 中更新（重新渲染）子组件？

Question

好的，我已经知道一种方法可以做到这一点。但是，我问这个以防我重新发明轮子，因为我对 React 很陌生。我的印象是，如果父组件通过 props 将其状态传递给子组件，而不是更新父组件的状态，则子组件将在需要时重新渲染。但情况似乎并非如此。我设置了这个例子，

class Child extends Component {
  constructor(props) {
    super(props);
    this.state = {
      number: props.number,
    };
  }

  updateNumber(n) {
    this.setState({number: n});
  }

  render() {
    return (<h1>{this.state.number}</h1>);
  }
}

class Parent extends Component {

  constructor(props) {
    super(props);
    this.state = {
      number: -1,
    };
    this.child = React.createRef();
    setInterval(this.updateState.bind(this), 1000);
  }

  updateState() {
    console.log(this.state);
    this.setState({
      number: Math.floor((Math.random() * 10) + 1),
    });
    // this.child.current.updateNumber(this.state.number);
  }

  render() {
    return (
      <div>
        <Child ref={this.child} number={this.state.number}/>
      </div>
    );
  }
}

在这个例子中，除非我明确定义一个引用并使用它来调用孩子的更新函数（注释部分），否则每次更新父母的状态时都不会重新渲染孩子。是这样吗？您是想手动更新孩子的状态（呵呵），还是如果他们的父母的状态作为道具传递给他们，他们应该自动更新（并因此重新渲染）。

Answer 1

这是因为您的 Child 组件也使用了自己的状态。总是问自己是否需要state，这是 React 初学者的常见错误。

希望您可以通过查看此示例更多地了解它。我建议您不要在构造函数中调用setInterval，而是在componentDidMount 和clearInterval 中调用它componentWillUnmount。

// Since you are not using state, you can use functional component for your Child component
const Child = ({ number }) => <h1>{number}</h1>;

class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.timer = null;
    this.state = { number: 0 };
  }

  componentDidMount() {
    // setInterval after component did mount
    this.timer = setInterval(this.incrementNumber, 1000);
  }

  componentWillUnmount() {
    // clearInterval when component is going to unmount
    if (this.timer) {
      clearInterval(this.timer);
    }
  }

  incrementNumber = () => {
    // setState function callback to ensure state received will be latest state
    this.setState(prevState => ({ number: prevState.number + 1 }));
  }

  render() {
    const { number } = this.state;
    return (
      <div>
        <Child number={number} />
      </div>
    );
  }
}

Answer 2

重新渲染孩子的一个简单选择是每次需要重新渲染时更新唯一键属性。

<ChildComponent key={this.state.updatedKey}/>

Answer 3

您的方法是错误的，不要像这样从子状态更新您的父状态，也不要将道具保存在子状态中，它们已经随着父更新而更新。

如果你想更新父表单子传递道具表单子到父这样。当父更新时，子也会更新。

class Child extends Component {
  constructor(props) {
    super(props);
  }

updateNumber=()=>{// update parent form child. call this function in somewhere in your component. if you want to pass event pass it as second argument
  this.props.updateNumber(newUpdatedNumber,event);
}

  render() {
    return (<h1>{this.props.number}</h1>);
  }
}

class Parent extends Component {

  constructor(props) {
    super(props);
    this.state = {
      number: -1,
    };
    this.child = React.createRef();
    setInterval(this.updateState.bind(this), 1000);
  }

  updateState() {
    console.log(this.state);
    this.setState({
      number: Math.floor((Math.random() * 10) + 1),
    });
  }
//update parent from child

  updateParentFromChild=(updatedNumber,event)=>{//catch function from child 
   this.setState({
      number:updatedNumber
   });
  }


  render() {
    return (
      <div>
        <Child ref={this.child} updateNumber={this.updateParentFromChild} number={this.state.number}/>
      </div>
    );
  }
}