React技术栈——ReactJS

初始化

引入三个script:

<script src="build/react.js"></script>
  <script src="build/react-dom.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
  

第一个是React的核心代码，第二react-dom.js是React里面操作DOM的部分，第三个browser.js将JSX转为Javascript语法。

ReactDOM.render

将模板语言转为HTML语言，并插入DOM

ReactDOM.render(
    <div>Test</div>,
    document.body
);

组件

组件类第一个字母必须大写

var Hello = React.createClass({
    render: function(){
        return <h1>Hello ,{this.props.name}</h1>
    }
})

ReactDOM.render(
    <Hello name="cxs" />,
    document.body
)

this.props.children

this.props对象属性与组件属性一一对应。this.props.children是例外，它表示组件的所有节点

var NotesList = React.createClass({
    render: function(){
        return (
            <ol>
            {
                React.children.map(this.props.children, function(child){
                    return <li>{child}</li>
                })
            }
            </ol>
        );
    }
});

ReactDOM.render(
    <NotesList>
        <span>Hello</span>
        <span>world</span>
    </NotesList>,
    document.body
);

PropTypes

组件的属性可以接受任意值。需要一种验证机制，验证别人使用组件时提供的参数是否合法

var Title = React.createClass({
    propTypes: {
        title: React.propTypes.string.isRequired,
    },
    render: function(){
        return <h1>{this.props.title}</h1>
    }
});

获取真实DOM节点

组件的是virtual DOM。需要获取真实DOM节点时，要用到ref属性

var Component = 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(
    <Component />,
    document.body
)

this.state

React的状态机，状态的变化可以出发重新渲染UI

var LikeButton = React.createClass({
    getInitialState: function(){
        return {liked: false};
    },
    handleClick: funtion(event){
        this.setState({liked: !this.state.liked});
    },
    render: function(){
        var text = this.state.liked ? 'like' : 'dont like';
        return(
            <p onclick={this.handleClick}>
            
            </p>
        )
    }
})

ReactDOM.render(
    <LikeButton />,
    document.body        
)

组件的生命周期

组件的生命周期有三个状态:

Mounting: 已插入真实DOM
Updating: 正在被重新渲染
Unmounting: 已移出真实DOM

React为每个状态提供两种处理函数，will在进入状态前调用，did函数在进入状态后调用，共五中处理函数:

componentWillMount()
componentDidMount()

componentWillUpdate(object nextProps, object nextState)
componentDidUpdate(object prevProps, object preState)

componentWillUnount()

还有两种特殊状态的处理函数：

componentWillReceiveProps(object nextProps): 已加载组件收到新的参数时调用
shouldComponentUpdate(object nextProps, object nextState): 组件判断是否重新渲染时调用

Demo:

var Hello = React.createClass({
    getInitialState: function(){
        return {
            opacity: 1.0
        }
    },
    
    componentDidMount: function(){
        this.timer = setInterval(function(){
            var opacity = this.state.opacity;
            opacity += 0.05;
            if(opacity < 0.1){
                opacity = 1.0;
            }
            this.setState({
                opacity: opacity
            })
        }.bind(this), 100)
    },
    
    render: function(){
        return (
            <div style={{opacity: this.state.opacity}}>
                Hello {this.props.name}
            </div>
        )
    }
});

ReactDOM.render(
    <Hello name="world" />,
    document.body
)