[TOC] ## 前言 本文重點學習理解react組件部分，文檔內容來源于react官網以及《react全棧》。本文內容僅針對react初學者，請大神略過，僅限于讀書筆記與摘錄。 本文節選 第三章第四節組件部分，建議閱讀時間：20-30min ## 概述 組件是react的基石，所有的react程序都應該是基于組件的。 ## 序 在之前是通過react.creatClass來實現定義類的，在支持了es6之后，我們通過class寫法以及構造器的部分簡化了很多。比如一個簡單的組件可能是這樣寫的：可以看到類屬性之間不用加逗號，構造器里就可以實現state的初始化等便利的操作。 ~~~ import React from ‘react' class List extends React.Component { constructor (){ super(); this.state=[‘a’,”b”,”c’]; } render (){ retrurn (…); } } ~~~ ## Props 注入屬性，一般是從外組件或者外界條件傳入的初始化數值，一般是基礎數據類型。其中通過this.props 來獲取相關的屬性值 ~~~ <h1>我的名字是：{this.props.name}</h1> //有了組件之后可以通過ReactDom 來把組件渲染到dom節點上。它的操作是 ： import {render} from ‘react-dom' const props= { name :"nike", age :’20' } Render(<compName {…props}>,document.getElementById(“container")) ~~~ 當程序結構變的復雜的時候 需要對傳入屬性做類型匹配的判斷，我們可以根據PropTypes 來判斷 ~~~ import {PropTypes } from ‘react' const proTypes= { optionalArray :PropTypes.array, optionalBool:PropTypes.bool, optionalFun:PropTypes.func, optionalNumbber:PropTypes.number, optionalObject:PropTypes.object, optionalString:PropTypes.string, //可以是一個reactElement 類型的 optionElement :PropTypes.element, //可以是別的組件的實例 optionalMessage:PropTypes.instanceOf(message), //可以規定為一組中的一個 optionalsEnum:PropTypes.oneof([“news”,”photos”]), //可以是規定的一組類型中的一個 optionalUnion:PropTypes.oneOfType([PropTypes.string,PropTypes.number,PropTypes.instanceOf(Message)]) } //了解了這么多屬性工具之后，我們嘗試的給我們的組件屬性加上驗證， Import React,{PropTypes} from ‘react' //需要驗證的屬性 const proptypes = { name : PropTypes.string.isRequired, age:PropTypes.number.isRequired } class Profile extends React.component { render ( ){ return ( <div class=“profile-component"> <h1>我的名字是{this.props.name}</h1> <h1>年齡是：{this.props.age}</h1> </div> ) } } Profile.proptypes = proptypes export default Profile ~~~ ## State 組件是組件內部的屬性，組件本身是一個狀態機，可以在構造函數中直接定義它的值，然后根據這些值渲染不同的ui，當state發生變化的時候，可以通過this.setState 來觸發render方法，重新渲染新的ui. 假如我們需要加一個點贊的按鈕,那么 我們的按鈕需要綁定事件. ~~~ <button onClick=“this.likedCallBack”>給我點贊</button> <span>總點贊數：{this.state.liked}</span> ~~~ 在構造函數中綁定當前對象，自定義函數不會被綁定到實例上，所以需要手動在constructor里面綁定。 ~~~ constructor (){ this.linkedCallBack = this.likedCallBack.bind(this); } likedCallBack(){ let liked = this.state.liked; liked++; //利用了對象屬性的缺省寫法 可以寫入一個回調函數 ， //這樣在某些特定場景的時候不需要額外寫自己的鉤子或者異步編程了 this.setState({ Liked },callBack) } ~~~ ## 組件的生命周期 每個組件都有自己的聲明周期，react用不同的方法來描述它的生命周期，我們可以稱為鉤子函數， 生命周期如下 ： - 組件初始化 getDefaultProps >getInititalState> componentWillMount> render> componentDidMount - 組件props更新 : componentWillReceiveProps >shouldComponentUpdate> componentWillUpdate> render > componentDidUpdate - 組件卸載: componentWillUnmount ## 組合組件 一個組件可以包含多個其他組件,比如 新建一個愛好的組件 ~~~ import React,{ PropTypes} from ‘react' const proptypes = { Hobby :PropTypes.string.isRequired } class hobby extends React.component{ render (){ return <li>this.props.hobbby</li> } } Hobby.proptypes = proptypes export default Hobby ; ~~~ ~~~ //在我的簡歷組件中 //Profile.jsx import Hobby from “./hobby" ... class Profile extends React.component{ constructor(){ super(); this.state={ liked:0; hobbies:[‘游泳’，’洗澡‘]} } render (){ return { {this.state.hobbies.map((hobby,i)=><hobby key={I} hobby={hobby}/>)} //注意給每個循環加唯一的key } } } ~~~ ## 無狀態函數組件 沒有復雜的state狀態機需求，不需要生命周期函數，那么可以吧這個組件定義為一個純函數組件，stateless functional component也就說只是根據需要生成組件，沒有其他的副作用，而且簡單明了。 比如剛才的愛好組件可以寫成這樣的。這個寫法是react推薦的 ~~~ function Hobby (props){ return <li>{props.hobby}</li> } export default Hobby ~~~ ## state設計原則：最小化state原則 盡量把盡可能多的組件設計為無狀態組件，把變動的部分集中到幾個核心的變化組件的state處理中。比如：商品列表，選中的商品列表。 分析如下： 可以從state計算中的得到的展示，寫到state中。 組件并不需要保存到state中，只需要render方法中渲染即可 props中的數據，可以看做組件的數據來源，因此也不需要保存在state中 ## dom操作 我們大多數情況直接用setState獲取值，但某些情況還是需要dom操作的，那么這個時候可以通過ref實現，在源上定義ref=’targetName’ 然后使用的時候 ~~~ let hobbyInput = this.refs.targetName let hobby = hobbyInput.value ~~~ ## 待探索內容 - react的dom是否支持鏈式操作？ - refs的實現機制是什么 ## 參考文檔 - 《react全棧》張軒 楊寒星著 - 《深入react技術棧》