React技术栈——ReactJS

2016-07-05 08:44:00

初始化

引入三个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 1. {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: 已插入真实DOMUpdating: 正在被重新渲染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                 Hello {this.props.name}        )    }});ReactDOM.render(    ,    document.body)

关键字：JavaScript, react.js, function, return

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击举报进行投诉反馈！