成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

react: 組件初識(shí) && 生命周期 && 相關(guān)說(shuō)明

jokester / 2124人閱讀

react組件

參考：https://facebook.github.io/re...

react的組件是其核心思想部分，react允許將整個(gè)ui設(shè)計(jì)分割稱(chēng)為獨(dú)立的、可復(fù)用的隔離模塊，react的組件是一個(gè)抽象的類(lèi)，直接使用reacy.component是沒(méi)有很大意義的，所以一般使用的方法就是定義一個(gè) class 來(lái)繼承這個(gè)component，并且需要實(shí)現(xiàn)方法 render（）；就像下面一樣：

      class Greeting extends React.Component {
          render() {
            return 
Hello, {this.props.name}
;
          }
      }

如果不想使用es6的class，也可以使用react提供的react.createClass({}),就像如下：

var Hello = React.createClass({
    render: function() {
        return 
Hello Taobao, Hello UED
;
    }
});

對(duì)于定義好的組件，就可以直接使用了，react在使用html標(biāo)準(zhǔn)標(biāo)簽和react組件標(biāo)簽時(shí)是通過(guò)首字母來(lái)進(jìn)行區(qū)別的，大寫(xiě)首字母就是自定義組件，無(wú)論是自定義組件還是html標(biāo)準(zhǔn)標(biāo)簽，處理的方式是一樣的，使用React.createElemment來(lái)進(jìn)行過(guò)組件的引用：

React.createElement(
  type,
  [props],
  [...children]
)

這也是說(shuō)明在jsx中無(wú)法書(shū)寫(xiě) if for之類(lèi)的語(yǔ)句，且可以使用js表達(dá)式的原因了?？梢钥纯矗篽ttp://reactjs.cn/react/tips/...

// This JSX:

Hello World!


// Is transformed to this JS:
React.createElement("div", {id: if (condition) { "msg" }}, "Hello World!");

ReactDOM.render(
Hello World!
, mountNode);
react生命周期

參考：https://facebook.github.io/re...
https://segmentfault.com/a/11...

mounting （實(shí)例化階段）這個(gè)階段的方法都是在組件被實(shí)例化、插入DOM中的過(guò)程中被順序調(diào)用的

getDefaultProps、getInitialState或者 constructor(props)

【前兩者es5寫(xiě)法，都是配合create-react-class可以設(shè)置初始 props、state的內(nèi)容，】

var createReactClass = require("create-react-class");
var Greeting = createReactClass({
getDefaultProps: function() {
  return {
    name: "Mary"
   };
 },
getInitialState: function() {
  return {count: this.props.initialCount};
},
 // ...

});

【后者使用es6寫(xiě)法，通過(guò)使用class就可以完成上面的操作，比較的簡(jiǎn)單】

class Greeting extends React.Component {
constructor(props) {
  super(props);
  this.state = {count: props.initialCount};
}
 // ...
}

Greeting.defaultProps = {
  name: "Mary"
  };

在實(shí)例化之前counstructor會(huì)被調(diào)用，首先需要執(zhí)行的是 super（props），這句需要在構(gòu)造函數(shù)的最前面，這里也是最適合初始化state的地方，如果這個(gè)組件不需要state、也不需要綁定任何方法，可以不調(diào)用constructor函數(shù)，

componentWillMount()

在實(shí)例化時(shí)最開(kāi)始執(zhí)行，在這里同步的修改state不會(huì)引起重新的渲染，在這里需要注意的是，官網(wǎng)有這樣一段話(huà)： This is the only lifecycle hook called on server rendering. Generally, we recommend using the constructor() instead. 我的理解是服務(wù)端渲染的實(shí)例化階段只會(huì)執(zhí)行componentWillMount這一個(gè)鉤子，不過(guò)參考的文章：https://segmentfault.com/a/1190000004168886#articleHeader3  有這樣的描述，這里具體就不太清楚了： ![圖片描述][1]

render() 補(bǔ)充部分有說(shuō)明

componentDidMount()

官網(wǎng)說(shuō)了，這個(gè)是在實(shí)例化完成立刻調(diào)用的函數(shù)，所以如果需要異步請(qǐng)求的話(huà)這里是最好的選擇，然后更新state，從而進(jìn)行重新渲染。

updating （更新期）在組件的props、state發(fā)生變化需要重新渲染時(shí)調(diào)用這個(gè)階段的函數(shù)

componentWillReceiveProps(nextProps)

 在實(shí)例化完成以后，如果有新的props將接受了，可以在這里處理props的對(duì)比，可能props沒(méi)有改變也會(huì)觸發(fā)這個(gè)鉤子函數(shù)，可能輸父級(jí)元素的重新渲染，只在更新期才會(huì)觸發(fā)，當(dāng)然在更新期修改state并不會(huì)觸發(fā)

shouldComponentUpdate()

在更新期接受到了props和state后，這里可以對(duì)比props和state，從而分析是否需要進(jìn)行重新的渲染，這個(gè)函數(shù)在forceUpdate（）來(lái)進(jìn)行強(qiáng)制刷新時(shí)不會(huì)被調(diào)用，這個(gè)函數(shù)會(huì)返回布爾值，當(dāng)返回false時(shí)，后面的willupdate、render、didupdate都不會(huì)執(zhí)行，不過(guò)這并不會(huì)影響改組件的子元素的渲染，當(dāng)子元素的props或者state有變化時(shí)還是會(huì)重新渲染。

componentWillUpdate(nextProps, nextState)

 這里最好不要做stestate的事情，setstate可以在componentWillReceiveProps時(shí)使用，如果shouldComponentUpdate返回false則不會(huì)調(diào)用了。

render()

componentDidUpdate()

 這里是進(jìn)行DOM操作的最佳時(shí)機(jī)，也是發(fā)起異步請(qǐng)求數(shù)據(jù)的好時(shí)機(jī)

unmounting （銷(xiāo)毀期）當(dāng)組件需要從DOM中移除時(shí)，或者頁(yè)面切換時(shí)需要調(diào)用

componentWillUnmount()

 這里可以用來(lái)消除創(chuàng)建的定時(shí)器、dom元素、異步請(qǐng)求等資源

補(bǔ)充

render（）函數(shù)在實(shí)例化和更新時(shí)都會(huì)被調(diào)用，除了在更新時(shí)起發(fā)生了componentWillUnmount()返回false這種情況，render執(zhí)行時(shí)會(huì)檢測(cè)props、state和是否只返回來(lái)了一個(gè)人頂級(jí)元素，也可以使用返回null或者false這樣的，會(huì)被忽略渲染，render函數(shù)最好也是純函數(shù)，

setState(updater, [callback])，這是一個(gè)異步操作，所以這并不會(huì)立刻改變satte的值，甚至?xí)壬虾脦状蔚男薷膩?lái)合并進(jìn)行，

forceUpdate，進(jìn)行強(qiáng)制渲染，一般而言最好是不用，使用的話(huà)將不會(huì)調(diào)用更新階段的shouldComponentUpdate()鉤子函數(shù)，

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/83019.html

相關(guān)文章

  • react：組件初識(shí) && 生命周期 && tips

    react組件 參考：https://facebook.github.io/re... react的組件是其核心思想部分，react允許將整個(gè)ui設(shè)計(jì)分割稱(chēng)為獨(dú)立的、可復(fù)用的隔離模塊，react的組件是一個(gè)抽象的類(lèi)，直接使用reacy.component是沒(méi)有很大意義的，所以一般使用的方法就是定義一個(gè) class 來(lái)繼承這個(gè)component，并且需要實(shí)現(xiàn)方法 render（）；就像下面一樣： ...

    miqt 評(píng)論0 收藏0

  • 如何用ahooks控制時(shí)機(jī)的hook？

    　　本篇主要和大家溝通關(guān)于ahooks ，我們可以理解為加深對(duì) React hooks 的了解。　　我們先說(shuō)下關(guān)于抽象自定義 hooks。構(gòu)建屬于自己的 React hooks 工具庫(kù)?！　∑鋵?shí)我們應(yīng)該培養(yǎng)閱讀學(xué)習(xí)源碼的習(xí)慣，工具庫(kù)是一個(gè)對(duì)源碼閱讀不錯(cuò)的選擇。　　注：本系列對(duì) ahooks 的源碼解析是基于v3.3.13。　　現(xiàn)在就進(jìn)入主題用ahooks 來(lái)封裝 React要注意的時(shí)機(jī)？　　Fun...

    3403771864 評(píng)論0 收藏0

  • React 學(xué)習(xí)之路 （四） state & 生命周期

    摘要：如果需要交互，應(yīng)該在生命周期中進(jìn)行交互。生命周期過(guò)程中涉及三個(gè)主要的動(dòng)作術(shù)語(yǔ)表示正在掛接虛擬到真實(shí)。每當(dāng)組件第一次加載到中的時(shí)候，我們都想生成定時(shí)器，表示正在被重新渲染。組件是真正隔離的每一個(gè)都會(huì)建立自己的定時(shí)器，并獨(dú)立的更新。 state & 生命周期 state 我們之前實(shí)現(xiàn)的時(shí)鐘，實(shí)現(xiàn)方式是每個(gè)一秒進(jìn)行一次渲染dom，但是這種方法并不合理。我們想要通過(guò)一種狀態(tài)來(lái)控制組件，實(shí)現(xiàn)更優(yōu)...

    羅志環(huán) 評(píng)論0 收藏0

  • 解讀useEvent顯著降低Hooks負(fù)擔(dān)的原生Hook

    　　想要做到就要有更多的學(xué)習(xí)，你知道為什么React不把他們?cè)O(shè)為默認(rèn)方法#useEvent是一個(gè)剛剛提案的原生Hook，還處于RFC。現(xiàn)在我們就一起來(lái)討論下　　RFC：Request for Comments 提案應(yīng)用的還十分廣泛　　我們先看看在沒(méi)有 useEvent 會(huì)出現(xiàn)的情況：　　functionChat(){ 　　const[text,setText]=useState(''...

    3403771864 評(píng)論0 收藏0

  • 前端每周清單第 29 期：Web 現(xiàn)狀分析與優(yōu)化策略、Vue 單元測(cè)試、Headless Chrom

    摘要：前端每周清單第期現(xiàn)狀分析與優(yōu)化策略單元測(cè)試爬蟲(chóng)作者王下邀月熊編輯徐川前端每周清單專(zhuān)注前端領(lǐng)域內(nèi)容，以對(duì)外文資料的搜集為主，幫助開(kāi)發(fā)者了解一周前端熱點(diǎn)分為新聞熱點(diǎn)開(kāi)發(fā)教程工程實(shí)踐深度閱讀開(kāi)源項(xiàng)目巔峰人生等欄目。 showImg(https://segmentfault.com/img/remote/1460000011008022); 前端每周清單第 29 期：Web 現(xiàn)狀分析與優(yōu)化策略...

    HackerShell 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

jokester

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<