快捷導(dǎo)航

在React中強(qiáng)制重新渲染的4 種方式案例代碼

更新時(shí)間：2023年12月20日 15:28:01 作者：大海里的一條魚.

這篇文章主要介紹了在React中強(qiáng)制重新渲染的4 種方式,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧

1.在 state 改變時(shí)重新渲染組件

React 組件在每次 state 變化時(shí)都會(huì)運(yùn)行 render() 方法。

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

在上面的例子中，在組件掛載完成之后更新了 state。

也可以在事件監(jiān)聽器中觸發(fā)重新渲染組件，例如 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>
      </>
    );
  }
}

以上都會(huì)輸出如下：

render() method
render() method

2.在 props 改變時(shí)重新渲染組件

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，但它接收了一個(gè) prop 名為 message。

點(diǎn)擊按鈕后，會(huì)更新 <Child /> 組件，會(huì)引起 render() 再次執(zhí)行。

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

3.借助 key prop 重新渲染

上述更新 state 和 props 的操作不會(huì)引起組件的重新掛載/卸載，只會(huì)重新調(diào)用 render() 方法。有時(shí)候?qū)τ谝恍┻壿嫃?fù)雜的組件，我們需要重新掛載/卸載操作，以便重新渲染內(nèi)容。

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
              : ""
          }
        />
      </>
    );
  }
}

上述的這個(gè)例子，當(dāng)用戶點(diǎn)擊標(biāo)題時(shí)，我們想要重新掛載/卸載整個(gè)子組件，這時(shí)可以在子組件上增加一個(gè) key 屬性，這樣便實(shí)現(xiàn)了目的?？梢钥吹矫看吸c(diǎn)擊后，都會(huì)執(zhí)行 componentWillUnmount() 方法。

4.強(qiáng)制重新渲染

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

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>
      </>
    );
  }
}

到此這篇關(guān)于在 React 中強(qiáng)制重新渲染的 4 種方式的文章就介紹到這了,更多相關(guān)React 重新渲染內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: