在React中强制重新渲染的4 种方式案例代码

class App extends React.Component {
  componentDidMount() {
    this.setState({});
  }
  render() {
    console.log('render() method')
    return <h1>Hi!</h1>;
  }
}

class App extends React.Component {
  state = {
    mssg: ""
  };
  handleClick = () => {
    this.setState({ mssg: "Hi there!" });
  };
  render() {
    console.log("render() method");
    return (
      <>
        <button onClick={this.handleClick}>Say something</button>
        <div>{this.state.mssg}</div>
      </>
    );
  }
}

class Child extends React.Component {
  render() {
    console.log('Child component: render()');
    return this.props.message;
  }
}
class App extends React.Component {
  state = {
    mssg: ""
  };
  handleClick = () => {
    this.setState({ mssg: "Hi there!" });
  };
  render() {
    return (
      <>
        <button onClick={this.handleClick}>Say something</button>
        <Child message={this.state.mssg} />
      </>
    );
  }
}

Child component: render() 
Child component: render()

class Child extends React.Component {
  componentWillUnmount() {
    console.log("will unmount");
  }
  render() {
    console.log("Child component: render()");
    return this.props.message;
  }
}
class App extends React.Component {
  state = {
    messages: [
      { id: 1, title: "Hello from Beijing", content: "Welcome to Beijing" },
      { id: 2, title: "Hello from London", content: "Welcome to London" },
      { id: 3, title: "Hello from Tokyo", content: "Welcome to Tokyo" }
    ],
    activeId: null
  };
  render() {
    const { messages, activeId } = this.state;
    return (
      <>
        <ul>
          {messages.map((item) => (
            <li
              key={item.id}
              onClick={() => {
                this.setState({ activeId: item.id });
              }}
            >
              {item.title}
            </li>
          ))}
        </ul>
        <Child
          key={activeId}
          message={
            activeId
              ? messages.find((item) => item.id === activeId).content
              : ""
          }
        />
      </>
    );
  }
}

class App extends React.Component {
  handleClick = () => {
    // force a re-render
    this.forceUpdate();
  };
  render() {
    console.log('App component: render()')
    return (
      <>
        <button onClick={this.handleClick}>Say something</button>
      </>
    );
  }
}