在 React 中强制重新渲染的 4 种方式

rainyjune

知乎前端工程师。

1.在 state 改变时重新渲染组件

React 组件在每次 state 变化时都会运行 render() 方法。

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

在上面的例子中，在组件挂载完成之后更新了 state。

也可以在事件监听器中触发重新渲染组件，例如 click 事件里。

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>
}

以上都会输出如下：

render() method 
render() method

2.在 props 改变时重新渲染组件

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 /> 组件不含有 state，但它接收了一个 prop 名为 message。

点击按钮后，会更新 <Child /> 组件，会引起 render() 再次执行。

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

3.借助 key prop 重新渲染

上述更新 state 和 props 的操作不会引起组件的重新挂载/卸载，只会重新调用 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 (
          {messages.map((item) => (
              key={item.id}
              onClick={() => {
                this.setState({ activeId: item.id });
              {item.title}
        <Child
          key={activeId}
          message={
            activeId
              ? messages.find((item) => item.id === activeId).content
              : ""

上述的这个例子，当用户点击标题时，我们想要重新挂载/卸载整个子组件，这时可以在子组件上增加一个 key 属性，这样便实现了目的。可以看到每次点击后，都会执行 componentWillUnmount() 方法。

4.强制重新渲染

不建议采用此方式，建议采用更新 props 和 state 的方式。

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