React個人學習筆記
阿新 • • 發佈:2018-06-20
myself value sse style css awesome func ons link
元素渲染
通過 ReactDOM.render()
方法渲染頁面, 可以使用 ES6 class 來定義一個組件:
class Welcome extends React.Component { render() { return <h1>Hello, {this.props.name}</h1>; } }
組件的嵌套
import LessonsLeft from ‘./LessonsLeft/index‘ class Welcome extends React.Component { render() { return (<div> <LessonsLeft /><h1>Hello, {this.props.name}</h1> </div>) } }
組件的數據狀態state
聲明當前組件的變量,必須通過 this.setState() 改變變量值,或者通過 this.forceUpdate() 手動觸發DOM更新
var testAPP = React.createClass({ getInitialState:function(){ // 使用 getInitialState 聲明state變量 return{ testData: ‘聲明變量‘ } }, handleClick: function() { // 通過 this.setState() 改變變量的值, this.setState({ testData: ‘更改了變量值‘ }) // 通過 this.forceUpdate() 改變變量的值, // this.state.testData = ‘更改了變量值‘ // this.forceUpdate() }, render:function() { return ( <div> <button onClick={this.handleClick}>點擊更改變量</button> {this.state.testData} </div> ) } }) React.render( </testAPP>, document.getElementById(‘app‘) )
父子組件的傳參props
父組件向子組件傳遞參數,子組件使用 props 接收
聲明props參數的類型使用 propTypes ,類型分別有:array bool func number object string,node element 等等 isRequired 表示該值不能為空
聲明props參數的默認值使用 getDefaultProps
var testAPP = React.createClass({ getInitialState:function(){ // 使用 getInitialState 聲明state變量 return { testData: ‘父組件的變量‘ } }, render: function() { return ( <div> <h1>這是父組件開始傳參</h1> <Template testData={this.state.testData} /> </div> ) } }) var template = React.createClass({ // 定義父組件傳遞參數的默認類型為String isRequired表示該值不能為空, propTypes:{ messages: React.PropTypes.string.isRequired, }, // 定義父組件傳遞參數的默認值 getDefaultProps: function () { return { testData: ‘這是默認的值‘ } }, render: function() { return ( <div> <h1>這是子組件props接收參數</h1> <p>{this.props.testData}</p> </div> ) } }) React.render( </TestAPP>, document.getElementById(‘app‘) )
事件處理
React事件綁定屬性的命名采用駝峰式寫法,而不是小寫
獲得原始的事件對象,使用 e.nativeEvent
阻止事件默認行為,使用 e.preventDefault()
var ClickApp = React.createClass({ getInitialState:function(){ return { clickCount: 0, } }, handleClick: function(e){ this.setState({ clickCount: this.state.clickCount + 1, }); // 獲得完整的事件對象,而不是被封裝過的 console.log(e.nativeEvent); }, render: function(){ return ( <div> <h2>點擊下面按鈕</h2> <button onClick={this.handleClick}>點擊我</button> <p>你一共點擊了:{this.state.clickCount}</p> </div> ) } }); var clickComponent = React.render( <ClickApp />, document.getElementById(‘app‘) )
DOM指向ref
將獲得的refs對象轉化為原生的DOM對象,使用 getDOMNode() 或者 React.findDOMNode()
ref 後面也可以接收一個函數 <div ref={ this.test() }><div>
獲得子組件的方法也可以使用refs this.refs.name.test()
var FormApp = React.createClass({ handleSubmit:function() { console.log(this.refs.goodInput.getDOMNode().value) console.log(React.findDOMNode(this.refs[‘goodInput‘].value)) }, render: function() { return ( <input ref="goodInput" type="text" defaultValue={this.state.inputValue }/> ) } })
雙向數據流
React本身並不存在雙向數據綁定,我們可以通過 react-with-addons 插件聲明 mixins 模擬實現
var EasyForm = React.createClass({ mixins: [ React.addons.LinkedStateMixin ], // 引入 React.addons.LinkedStateMixin 插件 getInitialState:function(){ return { message: ‘react is awesome!‘, isReactAwesome: true, } }, // 引入插件後擁有 this.linkState() 方法,模擬實現雙向數據綁定 render:function(){ return ( <div> <input type="text" valueLink={this.linkState(‘message‘)} /> <input type="checkbox" checkedLink={this.linkState(‘isReactAwesome‘) } /> <br/> </div> ) } });
this.linkState() 可以作為參數傳遞到子組件,通過子組件改變父組件的值
var EasyForm = React.createClass({ mixins: [ React.addons.LinkedStateMixin ], getInitialState:function(){ return { message: ‘react is awesome!‘, isReactAwesome: true, } }, render:function(){ return ( <div> <SubComp messageLink={ this.linkState(‘message‘) } likeLink={this.linkState(‘isReactAwesome‘)} /> </div> ) } }); var SubComp = React.createClass({ render:function(){ return ( <div> <h3>這是個子組件哦</h3> <SubSubComp {...this.props } /> </div> ) } }); var SubSubComp = React.createClass({ render:function(){ return ( <div> <p>你想說什麽?</p> <input type="text" valueLink={ this.props.messageLink } /> <p>你稀罕React麽?</p> <input type="checkbox" checkedLink = {this.props.likeLink } /> </div> ) } })
生命周期
componentWillMount : 組件渲染前. state數據已經加載 componentDidMount: 組件渲染完成後,可以獲取DOM componentWillUnmount: 組件被卸載前 shouldComponentUpdate: 組件數據觸發更新之前,必須返回一個boolean, 接收 nextProp, nextState 兩個參數 componentWillUpdate: 組件數據觸發更新之後 ,接收 nextProp, nextState 兩個參數 componentDidUpdate: 組件數據更新成功之後 componentWillReceiveProps : 子組件將要獲得prop參數之前, 接收 nextProp 一個參數shouldComponentUpdate:function(nextProp,nextState){ console.log(‘shouldComponentUpdate‘); if(nextState.count > 10) return false; return true; },
手動卸載React 對象,使用 React.unmountComponentAtNode() 接收一個DOM節點參數
killMySelf: function(){ React.unmountComponentAtNode( document.getElementById(‘app‘) ); },
React個人學習筆記