React学习笔记4——交互

2015-04-13 Alex Sun 更多博文 » 博客 » GitHub »

原文链接 https://syaning.github.io/2015/04/13/react-note-4/
注：以下为加速网络访问所做的原文缓存，经过重新格式化，可能存在格式方面的问题，或偶有遗漏信息，请以原文为准。

事件处理

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从外层组件传到内层组件。

参考