react子组件重新渲染的方法是什么

React中子组件重新渲染的方法有两种：

1. 父组件传递props给子组件，当props发生变化时，子组件会重新渲染。这是React中最常用的一种方法，可以通过父组件的state或者props来控制子组件的渲染。

例如：

class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      // 初始化状态
      count: 0
    };
  }

  handleClick() {
    this.setState(prevState => ({
      count: prevState.count + 1
    }));
  }

  render() {
    return (
      <div>
        <h1>Count: {this.state.count}</h1>
        <ChildComponent count={this.state.count} />
        <button onClick={() => this.handleClick()}>Increase Count</button>
      </div>
    );
  }
}

class ChildComponent extends React.Component {
  render() {
    return <h2>Child Count: {this.props.count}</h2>;
  }
}

在上面的例子中，当父组件的状态count发生变化时，子组件会重新渲染并显示最新的count值。

2. 使用React的Context API来实现子组件的重新渲染。Context API可以将数据共享给整个组件树，当Context的值发生变化时，受到影响的子组件会重新渲染。

例如：

const MyContext = React.createContext();

class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  handleClick() {
    this.setState(prevState => ({
      count: prevState.count + 1
    }));
  }

  render() {
    return (
      <div>
        <h1>Count: {this.state.count}</h1>
        <MyContext.Provider value={this.state.count}>
          <ChildComponent />
        </MyContext.Provider>
        <button onClick={() => this.handleClick()}>Increase Count</button>
      </div>
    );
  }
}

class ChildComponent extends React.Component {
  render() {
    return (
      <MyContext.Consumer>
        {value => <h2>Child Count: {value}</h2>}
      </MyContext.Consumer>
    );
  }
}

在上面的例子中，当父组件的状态count发生变化时，通过Context共享给子组件的value值也会发生变化，从而触发子组件重新渲染。