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

jokester 發(fā)布于2019-08-20 16:35 / 2103人閱讀

react組件

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

react的組件是其核心思想部分，react允許將整個ui設(shè)計分割稱為獨立的、可復(fù)用的隔離模塊，react的組件是一個抽象的類，直接使用reacy.component是沒有很大意義的，所以一般使用的方法就是定義一個 class 來繼承這個component，并且需要實現(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;
    }
});

對于定義好的組件，就可以直接使用了，react在使用html標準標簽和react組件標簽時是通過首字母來進行區(qū)別的，大寫首字母就是自定義組件，無論是自定義組件還是html標準標簽，處理的方式是一樣的，使用React.createElemment來進行過組件的引用：

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

這也是說明在jsx中無法書寫 if for之類的語句，且可以使用js表達式的原因了。可以看看：http://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 （實例化階段）這個階段的方法都是在組件被實例化、插入DOM中的過程中被順序調(diào)用的

getDefaultProps、getInitialState或者 constructor(props)

【前兩者es5寫法，都是配合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寫法，通過使用class就可以完成上面的操作，比較的簡單】

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

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

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

componentWillMount()

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

render() 補充部分有說明

componentDidMount()

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

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

componentWillReceiveProps(nextProps)

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

shouldComponentUpdate()

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

componentWillUpdate(nextProps, nextState)

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

render()

componentDidUpdate()

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

unmounting （銷毀期）當組件需要從DOM中移除時，或者頁面切換時需要調(diào)用

componentWillUnmount()

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

補充

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

setState(updater, [callback])，這是一個異步操作，所以這并不會立刻改變satte的值，甚至?xí)壬虾脦状蔚男薷膩砗喜⑦M行，

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