React生命周期需要关心的问题

最新推荐文章于 2025-07-26 11:09:40 发布

原创最新推荐文章于 2025-07-26 11:09:40 发布 · 291 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react #render #lifeCycle

react 专栏收录该内容

2 篇文章

订阅专栏

本文探讨了React中条件渲染的两种方式，即使用三元运算符和逻辑与运算符，并解释了它们如何影响组件的生命周期函数，如componentWillMount和componentWillReceiveProps。文章还深入分析了render函数的触发时机及shouldComponentUpdate的作用。

&& 或是？：条件渲染的方式

{ show ? <PrimaryButton></PrimaryButton> :
    <DefaultButton></DefaultButton>
}
{show && this.renderDetail()}

上面的两种条件渲染的方式，Jsx式的组件或是函数式的组件，没有满足渲染条件的组件不会被渲染，也就不会触发componentWillMount,componentDidMount等周期函数。

`componentWillMount`

1.可以State,但是不会触发重新render，因为还没有进行到render那一步。

2.在这里尽量不要去进行AJAX等请求，因为你不能保证请求会在mount之前完成，也就是说组件还没有挂载，并不一定能进行setState.

`componentWillReceiveProps`

1.在父组件发生重新render或者是props改变的时候会触发。

2.在组件初始化阶段接收props不会触发，因为这个周期函数需要比较新旧props,但是初始化阶段没有旧的props.

何时触发`render`

在组件运行阶段进行的setState或者是触发componentWillReceiveProps函数，将会由shouldComponentUpdate 来决定是否进行重新render，而默认的shouldComponentUpdate总是返回true，也就会造成重新render。

但是，重新render不代表DOM元素会更新，因为React生成的首先是VNode，只有DOM元素对应在VNode中的那部分改变了才会更新。