react是R系技術棧中最基礎同時也是最核心的一環，2年不到獲取了62.5k star(截止到目前)，足可見其給力程度。下面對一些react日常開發中的注意事項進行羅列。
react主要思想是構建可復用組件來構建用戶界面。在react里面一切皆組件。每個組件里面都是有自己的生命周期，這個生命周期規定了組件的狀態和方法，分別在哪個階段執行。下面附上一張React的生命周期圖：
組件第一階段：初始化、渲染以及裝載完成；
組件第二階段：組件運行時候的狀態 ①:狀態變化引發組件的更新和重新渲染到更新完成
②:父組件屬性變化引發組件的更新(是常見的組件之間傳遞數據和同步狀態的手段):比如父組件登錄了，子組件也需變成登錄狀態
組件第三階段：卸載組件
const names = ['Alice', 'Emily', 'Kate'];ReactDOM.render( <div> { names.map((name) => { return <div>Hello, {name}!</div> }) } </div>, document.getElementById('example'));JSX 的基本語法規則：遇到 HTML 標簽（以<開頭），就用 HTML 規則解析；遇到代碼塊（以{開頭），就用 JavaScript 規則解析。
所以給jsx添加注釋只要這樣子：
{/* 。。。 */}
父組件傳向子組件
子：var HelloMessage = React.createClass({ render: function() { return <h1>Hello {this.props.name}</h1>; }});---------------------------------------父：ReactDOM.render( <HelloMessage name="Muyy" />, document.getElementById('example'));變量HelloMessage就是相當于一個子組件類。通過this.props.name獲取到了Muyy。
另外注意
render方法，用于輸出組件。HelloMessage不能寫成helloMessageclass屬性需要寫成className，for屬性需要寫成htmlFor，這是因為class和for是 JavaScript 的保留字其實很簡單，概括起來就是：react中state改變了，組件才會update。父組件寫好state和處理該state的函數，同時將函數名通過props屬性值的形式傳入子，子調用父的函數，同時引起state變化。
例子1.這里如下圖，用戶郵箱為父，綠色框為子。 父組件為用戶輸入的郵箱設好state，即“{email: ''}”，同時寫好處理state的函數，即“handleEmail”，這兩個名稱隨意起；再將函數以props的形式傳到子組件，子組件只需在事件發生時，調用父組件傳過來的函數即可。
//子組件var Child = React.createClass({ render: function(){ return ( <div> 請輸入郵箱：<input onChange={this.props.handleEmail}/> </div> ) }});//父組件，此處通過event.target.value獲取子組件的值var Parent = React.createClass({ getInitialState: function(){ return { email: '' } }, handleEmail: function(event){ this.setState({email: event.target.value}); }, render: function(){ return ( <div> <div>用戶郵箱：{this.state.email}</div> <Child name="email" handleEmail={this.handleEmail.bind(this)}/> </div> ) }});React.render( <Parent />, document.getElementById('test'));例子2.有時候往往需要對數據做處理，再傳給父組件，比如過濾或者自動補全等等，下面的例子對用戶輸入的郵箱做簡單驗證，自動過濾非數字、字母和"@."以外的字符。
//子組件，handleVal函數處理用戶輸入的字符，再傳給父組件的handelEmail函數var Child = React.createClass({ handleVal: function() { var val = this.refs.emailDom.value; val = val.replace(/[^0-9|a-z|/@|/.]/ig,""); this.props.handleEmail(val); }, render: function(){ return ( <div> 請輸入郵箱：<input ref="emailDom" onChange={this.handleVal}/> </div> ) }});//父組件，通過handleEmail接受到的參數，即子組件的值var Parent = React.createClass({ getInitialState: function(){ return { email: '' } }, handleEmail: function(val){ this.setState({email: val}); }, render: function(){ return ( <div> <div>用戶郵箱：{this.state.email}</div> <Child name="email" handleEmail={this.handleEmail.bind(this)}/> </div> ) }});React.render( <Parent />, document.getElementById('test'));例子3.如果還存在孫子組件的情況呢？如下圖，黑框為父，綠框為子，紅框為孫，要求子孫的數據都傳給爺爺。原理一樣的，只是父要將爺爺對孫子的處理函數直接傳下去。
//孫子，將下拉選項的值傳給爺爺var Grandson = React.createClass({ render: function(){ return ( <div>性別： <select onChange={this.props.handleSelect}> <option value="男">男</option> <option value="女">女</option> </select> </div> ) }});//子，將用戶輸入的姓名傳給爹 //對于孫子的處理函數，父只需用props傳下去即可var Child = React.createClass({ render: function(){ return ( <div> 姓名：<input onChange={this.props.handleVal}/> <Grandson handleSelect={this.props.handleSelect}/> </div> ) }});//父組件，準備了兩個state，username和sex用來接收子孫傳過來的值，對應兩個函數handleVal和handleSelectvar Parent = React.createClass({ getInitialState: function(){ return { username: '', sex: '' } }, handleVal: function(event){ this.setState({username: event.target.value}); }, handleSelect: function(event) { this.setState({sex: event.target.value}); }, render: function(){ return ( <div> <div>用戶姓名：{this.state.username}</div> <div>用戶性別：{this.state.sex}</div> <Child handleVal={this.handleVal.bind(this)} handleSelect={this.handleSelect.bind(this)}/> </div> ) }});React.render( <Parent />, document.getElementById('test'));getDefaultProps方法可以用來設置組件屬性的默認值
var MyTitle = React.createClass({ getDefaultProps : function () { return { title : 'Hello World' }; }, render: function() { return <h1> {this.props.title} </h1>; }});ReactDOM.render( <MyTitle />, document.body);getInitialState 方法可以用來設置初始狀態
getInitialState: function() { return {liked: false}; },從組件獲取真實 DOM 的節點，這時就要用到ref屬性
var MyComponent = React.createClass({ handleClick: function() { this.refs.myTextInput.focus(); }, render: function() { return ( <div> <input type="text" ref="myTextInput" /> <input type="button" value="Focus the text input" onClick={this.handleClick} /> </div> ); }});ReactDOM.render( <MyComponent />, document.getElementById('example'));上面代碼中，組件MyComponent的子節點有一個文本輸入框，用于獲取用戶的輸入。這時就必須獲取真實的 DOM 節點，虛擬 DOM 是拿不到用戶輸入的。為了做到這一點，文本輸入框必須有一個ref屬性，然后this.refs.[refName]就會返回這個真實的 DOM 節點。
需要注意的是，由于this.refs.[refName]屬性獲取的是真實 DOM ，所以必須等到虛擬 DOM 插入文檔以后，才能使用這個屬性，否則會報錯。上面代碼中，通過為組件指定Click事件的回調函數，確保了只有等到真實 DOM 發生Click事件之后，才會讀取this.refs.[refName]屬性。
React 組件支持很多事件，除了Click事件以外，還有KeyDown、Copy、Scroll等，完整的事件清單請查看官方文檔。
子組件傳向父組件的另一種思路
父組件調用子組件的state、function，除了上面介紹的方法之外，也可以通過ref屬性實現。推薦使用這種方式進行子組件向父組件的傳遞。舉個簡單的示范：
export default class 父組件a extends React.Component { constructor(props) { super(props) } render() { return ( <子組件b ref={r => this.bbbb =r} // bbbb自定義名字 /> ) }}經過這樣處理后后，現在父組件a中可以通過this.bbbb.state.xxx獲取子組件的xxx狀態，也可以通過this.bbbb.xxx獲取子組件的xxx方法。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
