时间戳

首页 > 解决方案 > 理解反应中的渲染

javascript - 理解反应中的渲染

问题描述

我有多个问题，但由于它们都有一定的关联，我考虑在同一个线程中提问。

所以基本上我很难理解 React 渲染策略，所以我把它分解成更简单的术语，我正在寻求帮助来理解

问题一：

React 是否仅在状态更改时重新渲染？

问题2：

假设我有一个父有状态组件（类的东西扩展组件），同样在文件中，我们导入多个东西，比如

import Post from '../../components/Post/Post';
import FullPost from '../../components/FullPost/FullPost';
import NewPost from '../../components/NewPost/NewPost';

因此使它成为这样的回报

render () {
      console.log(this.state.error)
    let newPosts = <p style={{textAlign: 'center'}}> Sorry some error </p>
      if (!this.state.error) {
        newPosts = this.state.posts.map(el => {
          return <Post key={el.id}
           title={el.title}
           author={el.author}
           clicked={() =>this.postClicked(el.id)}/>
        })
    }

return (
            <div className="Blog">
              <header>
                <nav>
                  <ul>
                    <li><a href="/">Home </a> </li>
                    <li><a href="/new-post">New Post</a></li>
                  </ul>
                </nav>
              </header>
                <section className="Posts">
                  {newPosts}
                </section>
                <section>
                    <FullPost id={this.state.selectedPostId}/>
                </section>
                <section>
                    <NewPost />
                </section>
            </div>

那么当我们的状态发生变化时，它会渲染这里所有与状态相关的东西吗？喜欢里面的一切FullPost还是newPosts？

问题 3：

FullPost（或newPosts）恰好是上述帖子的孩子，现在如果在我们的完整帖子中我们的状态发生变化，它是否也会在我们的父类中呈现组件？

此外，如果您可以分享任何有关 React 状态更改/渲染的有趣信息，将会非常有帮助。

标签： javascriptreactjs

解决方案

  1. React 会在以下情况下重新渲染：
    a) SetState 被调用，或者 state 的值改变
    b) props 改变
    c) forceUpdate() 被调用（这将被弃用）
  2. FullPost 或 newPosts 中的所有内容？
    不，当状态改变或重新渲染启动时，只会再次调用渲染函数，从 react 16.3 开始，getDerivedStateFromProps() 也会被调用。在状态/道具更新渲染之前调用的另一个函数是 shouldComponentUpdate()
  3. 子组件的 state/props 的变化只会重新渲染子组件。但是如果一个父组件被重新渲染，它的子组件也被重新渲染。

推荐阅读