事件处理

React中的事件处理方式与HTML方式类似,都是通过为标签添加属性来声明事件处理函数。如下所示:

var LikeButton = React.createClass({
    getInitialState: function(){
        return {like: true};
    },
    handleClick: function(){
        this.setState({like: !this.state.like});
    },
    render: function(){
        return (
            <button onClick={this.handleClick}>
                You {this.state.like ? 'like' : 'haven\'t liked'} this
            </button>
        );
    }
});

React.render(
    <LikeButton />,
    document.getElementById('example')
);

React通过实现一套模拟的事件系统,从而确保所有的事件在IE8+环境下行为一致,从而避免了不同浏览器之间的差异。

如果需要在触屏设备上使用React,只需要React.initializeTouchEvents(true);即可让React支持触屏事件。

在React中,事件处理函数并非直接绑定在节点上,而是由一个全局对象监听所有的事件。此外,React维护着一张映射表, 当一个事件触发的时候,React会根据这张映射表来委派事件。当添加或删除组件的时候,其相应的事件处理函数也会添加 或删除。

深入state

在React中,UI其实就是一个个的状态机。开发人员只需要定义好不同state下的UI表现,然后关注点放在state上即可。 一旦state发生改变,React会自动根据state来改变UI。

通常情况下,state放置的是会动态变化的数据,例如用户的输入或者ajax从服务器请求的数据。而其它相对比较确定的数据 一般是放在props里。另外,好的习惯是让尽可能多的组件是无状态的。因此,在某些情况下,可以仅仅让外层组件保存状态, 而所有的内层组件仅仅负责渲染数据,数据通过props从外层组件传到内层组件。

参考