React 使用笔记

React使用笔记

---

title: react使用笔记
keywords: react jsx

description: react使用笔记，react读书笔记

JSX语法

• 使用className
• <label>内使用hemlfor代替for
• jsx可以使用React.createElement(…args),来代替，这里我把它看做可以自定义现有的标签，然后使用，第一个参数是标签,第二个参数是一个属性对象,每三个是子节点。
• 插入特殊字符，先找到Unicode字符，然后使用，eg：\u00b7 or String.fromCharCode(183)
• 设置了value的input 想要响应用户输入必须用onChange or使用defaultValue
• textarea 不使用子节点的内容插入，使用value
• select不用option上的selected，而在select 上用value属性指向option中对应的value值
• <select multiple={true} value= {[‘B’, ‘C’]}> //指定多个已选值

事件

AutoBinding：

在 JavaScript 里创建回调的时候,为了保证 this 的正确性,一般都需要显式地绑定方法到它的实例上。在 React,所有方法被自动绑定到了它的组件实例上(除非使用 ES6的class符号)。React 还缓存这些绑定方法,所以 CPU 和内存都是非常高效。而且还能 减少打字!
es6的class中无法自动绑定this到component上，需要用 bind(this) or =>箭头函数

事件代理 :

React 实际并没有把事件处理器绑定到节点本身。当 React 启动的时候,它在最 外层使用唯一一个事件监听器处理所有事件。当组件被加载和卸载时,只是在内部映射里添 加或删除事件处理器。当事件触发,React 根据映射来决定如何分发。当映射里处理器时,会 当作空操作处理。参考 David Walsh 很棒的文章 了解这样做高效的原因。(ps:其实就是把事件绑定到父节点)

数据双向绑定

学习过angular的童鞋都知道双向数据绑定，不得不说第一次看到的时候感觉实在是太酷炫了，简单的ng-bind就可以使用了，而react的数据是单向流动的，想实现双向数据绑定其实也很简单

var NoLink = React.createClass({
    getInitialState: function () {
        return {message: 'Hello!'};
    },
    handleChange: function (event) {
        this.setState({message: event.target.value});
    },
    render: function () {
        var message = this.state.message;
        return <input type="text" value={message} onChange={this.handleChange}/>;
    }
});

同时也可以使用ReactLink，对onChange和setState的一层包装，checkbox中使用checkLink

var LinkedStateMixin = require('react-addons-linked-state-mixin');
var WithLink = React.createClass({
    mixins: [LinkedStateMixin],
    getInitialState: function () {
        return {message: 'Hello!'};
    },
    render: function () {
        return <input type="text" valueLink={this.linkState('message')}/>;
    }
});

key

使用key可以有效避免component变化但元素是一样的时候进行unmount 之后再进行remount，例如有一个<right> 和<left>进行顺序调换，应该使用<right key="right">;和<left key="left" >