Question

我有多个问题，但由于它们都有些关联，因此我考虑在同一线程中进行询问。

所以基本上我在理解React渲染策略上花了很多时间，所以我将其分解为一些简单的术语，以寻求帮助以帮助理解

问题1：

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状态更改/呈现的任何有趣信息，将非常有帮助。

Answer 1

在以下情况下反应退货，
a）调用SetState或状态值更改
b）道具变更
c）调用forceUpdate（）（将不推荐使用）
FullPost或newPosts中的所有内容？
不，当状态更改或重新渲染启动时，仅会再次调用render函数，并且从反应16.3起，还将调用getDerivedStateFromProps（）。在状态/道具更新渲染之前调用的另一个函数是shouldComponentUpdate（）
子组件状态/属性的更改将仅重新呈现子组件。但是，如果父组件被重新渲染，其子组件也会被重新渲染。

了解反应中的渲染

1 个答案: