react: 元件初識 && 生命週期 && 相關說明

caoweiju發表於2017-05-15
React元件

react元件

react的元件是其核心思想部分，react允許將整個ui設計分割稱為獨立的、可複用的隔離模組，react的元件是一個抽象的類，直接使用reacy.component是沒有很大意義的，所以一般使用的方法就是定義一個 class 來繼承這個component，並且需要實現方法 render（）；就像下面一樣：

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

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

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

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

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

這也是說明在jsx中無法書寫 if for之類的語句，且可以使用js表示式的原因了。可以看看：http://reactjs.cn/react/tips/…

// This JSX:
<div id={if (condition) { `msg` }}>Hello World!</div>

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

ReactDOM.render(<div id={condition ? `msg` : null}>Hello World!</div>, mountNode);

react生命週期

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

  • mounting （例項化階段）這個階段的方法都是在元件被例項化、插入DOM中的過程中被順序呼叫的

    1. getDefaultProps、getInitialState或者 constructor(props)

      【前兩者es5寫法，都是配合create-react-class可以設定初始 props、state的內容，】

      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會被呼叫，首先需要執行的是 super（props），這句需要在建構函式的最前面，這裡也是最適合初始化state的地方，如果這個元件不需要state、也不需要繫結任何方法，可以不呼叫constructor函式，

    2. componentWillMount()

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

    3. render() 補充部分有說明

    4. componentDidMount()

      官網說了，這個是在例項化完成立刻呼叫的函式，所以如果需要非同步請求的話這裡是最好的選擇，然後更新state，從而進行重新渲染。

  • updating （更新期）在元件的props、state發生變化需要重新渲染時呼叫這個階段的函式

    1. componentWillReceiveProps(nextProps)

       在例項化完成以後，如果有新的props將接受了，可以在這裡處理props的對比，可能props沒有改變也會觸發這個鉤子函式，可能輸父級元素的重新渲染，只在更新期才會觸發，當然在更新期修改state並不會觸發

    2. shouldComponentUpdate()

      在更新期接受到了props和state後，這裡可以對比props和state，從而分析是否需要進行重新的渲染，這個函式在forceUpdate（）來進行強制重新整理時不會被呼叫，這個函式會返回布林值，當返回false時，後面的willupdate、render、didupdate都不會執行，不過這並不會影響改元件的子元素的渲染，當子元素的props或者state有變化時還是會重新渲染。

    3. componentWillUpdate(nextProps, nextState)

       這裡最好不要做stestate的事情，setstate可以在componentWillReceiveProps時使用，如果shouldComponentUpdate返回false則不會呼叫了。

    4. render()

    5. componentDidUpdate()

       這裡是進行DOM操作的最佳時機，也是發起非同步請求資料的好時機

  • unmounting （銷燬期）當元件需要從DOM中移除時，或者頁面切換時需要呼叫

    1. componentWillUnmount()

       這裡可以用來消除建立的定時器、dom元素、非同步請求等資源

補充

  1. render（）函式在例項化和更新時都會被呼叫，除了在更新時起發生了componentWillUnmount()返回false這種情況，render執行時會檢測props、state和是否只返回來了一個人頂級元素，也可以使用返回null或者false這樣的，會被忽略渲染，render函式最好也是純函式，

  2. setState(updater, [callback])，這是一個非同步操作，所以這並不會立刻改變satte的值，甚至會等上好幾次的修改來合併進行，

  3. forceUpdate，進行強制渲染，一般而言最好是不用，使用的話將不會呼叫更新階段的shouldComponentUpdate()鉤子函式，

相關文章