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個人學習筆記