React技术栈——ReactJS

初始化

引入三个script:

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

ReactDOM.render

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

ReactDOM.render(
    Test,
    document.body
);

组件

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

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

ReactDOM.render(
    ,
    document.body
)

this.props.children

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

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

ReactDOM.render(
    
        Hello
        world
    ,
    document.body
);

PropTypes

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

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

获取真实DOM节点

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

var Component = React.createClass({
    handleClick: function(){
        this.refs.myTextInput.focus();
    },
    render: function(){
        return (
            
                
                
            
        )
    }
})

ReactDOM.render(
    ,
    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(
            
            
            
        )
    }
})

ReactDOM.render(
    ,
    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 (
            
                Hello {this.props.name}
            
        )
    }
});

ReactDOM.render(
    ,
    document.body
)