React中的render()

1、render()

是 class 組件中唯一必須實(shí)現(xiàn)的方法

2、當(dāng) render 被調(diào)用時(shí)

它會(huì)檢查 this.props 和 this.state 的變化并返回以下類型之一：

（1）React 元素。通常通過 JSX 創(chuàng)建。例如，<div /> 會(huì)被 React 渲染為 DOM 節(jié)點(diǎn)，<MyComponent /> 會(huì)被 React 渲染為自定義組件，無論是 <div /> 還是 <MyComponent /> 均為 React 元素。

（2）數(shù)組或 fragments。 使得 render 方法可以返回多個(gè)元素。

（3）Portals?？梢凿秩咀庸?jié)點(diǎn)到不同的 DOM 子樹中。

（4）字符串或數(shù)值類型。它們?cè)?DOM 中會(huì)被渲染為文本節(jié)點(diǎn)

（5）布爾類型或 null。什么都不渲染。（主要用于支持返回 test && <Child /> 的模式，其中 test 為布爾類型。)

3、render() 函數(shù)應(yīng)該為純函數(shù)

這意味著在不修改組件 state 的情況下，每次調(diào)用時(shí)都返回相同的結(jié)果，并且它不會(huì)直接與瀏覽器交互。

4、如需與瀏覽器進(jìn)行交互

請(qǐng)?jiān)?componentDidMount() 或其他生命周期方法中執(zhí)行你的操作。保持 render() 為純函數(shù)，可以使組件更容易使用、維護(hù)。

5、在React.Component類

的子類中會(huì)重新定義(實(shí)現(xiàn))

6、在react中觸發(fā)render的有4條路徑

以下假設(shè)shouldComponentUpdate都是按照默認(rèn)返回true的方式。

（1）首次渲染Initial Render

（2）調(diào)用this.setState （并不是一次setState會(huì)觸發(fā)一次render，React可能會(huì)合并操作，再一次性進(jìn)行render）

（3）父組件發(fā)生更新（一般就是props發(fā)生改變，但是就算props沒有改變或者父子組件之間沒有數(shù)據(jù)交換也會(huì)觸發(fā)render）

（4）調(diào)用this.forceUpdate

7、生命周期流程圖（來源于官網(wǎng)）

注意：如果在shouldComponentUpdate里面返回false可以提前退出更新路徑

React render在什么時(shí)候會(huì)被觸發(fā)？

在 React 中，只要執(zhí)行了 setState 方法，就一定會(huì)觸發(fā) render 函數(shù)執(zhí)行；

組件的 props 改變了，不一定觸發(fā) render 函數(shù)的執(zhí)行，除非 props 的值來自于父組件或者祖先組件的 state 

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論