当父组件的状态发生变化时，如何更新（重新渲染）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>
    );
  }
}

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

Answer 1

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

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

Answer 2

这是因为您的 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 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>
    );
  }
}