欢迎指导与讨论 : ）
前言
本文主要是笔者在React英文官网学习时整理的笔记。由于笔者水平有限，如有错误恳请指出 O(∩_∩)O
一 、Tutoial 篇
1 . React的组件类名的首字母必须是大写 var Comment = React.creatClass({..}) class Comment extends Component(){...}
2 . 我们需要往一个对象里传入一些方法，并把这个对象以参数的形式传到React.creatClass( )里。其中最重要的方法是render( )，它会返回一棵组件树，并在最后把组件render(渲染)到HTML里
3 . 组件内部tags(HTML标签)并不是正真的DOM节点，它们都只是React组件的实例。你可以把这些tags当做是标识，或者是数据的片段，而React会知道怎么处理它们。React也不会生成HTML字符串，因此默认对xss攻击是有保护作用
4 . 数据通过property(属性)从父级组件传到子组件。在子组件，这些数据成为了this.props，而其它一些嵌套的元素变成了this.props.children
5 . 当页面出现未经转换的HTML标签，比如 "This is <b>Blog</b>" ，这多半是React未了防止xss攻击而做的。当我们想把字符串里面的标签转换为正真的HTML，我们需要dangerouslySetInnerHTML
rawMarkup: function() {
var rawMarkup = ...
return { __html: rawMarkup };
}
<span dangerouslySetInnerHTML={this.rawMarkup()} />
6 . props一般是immutable( 不可变 )，我们需要引入state( mutable可变 )。每当state改变时，组件就会re-render( 重新渲染 )它自己。this.state在组件内部是私有的属性，我们可以通过this.setState( )方法来设置、改变state。也能通过getInitialState( )方法来设置初始化的state
7 . componentDidMount( )方法会在组件渲染在HTML的时候自动执行。因此我们可以在这个生命周期函数里fetch/Ajax异步获取我们需要的数据，然后this.setState，把数据渲染到界面上
8 . Callbacks as props。父组件把某些函数当做property传给子组件。当子组件触发这个函数时，父组件就能获取变化，并做进一步处理。
二、Displaying Data / JSX
1 . React 内部使用迅速、性能强大的虚拟DOM和diffs算法，用来计算'谁'是需要被更新的。React 不会随意操作DOM，除非这个操作是必须的。
2 . 限制：React组件函数最多只允许渲染一个根节点，如果你的组件包含多个节点，请把它们包含在一个大的根节点里面。
3 . JSX语法是可选的，我们也选择使用原生JS去写我们的组件，但是JSX语法更加高效、易懂。JSX可以同时渲染HTML标签(小写)和我们开发的组件(首字母大写)
4 . 注意：DOM里面的属性class（类名）和for（），在JSX里面的写法是className和htmlFor
5 . 布尔值属性 <input type="button" disabled={false} /> 。三元表达式 var content = <Container>{window.isLoggedIn ? <Nav /> : <Login />}</Container>
6 . 同名属性会被后面的属性重写
var props = { foo: 'default' };
var component = <Component {...props} foo={'override'} />;
7. 如果我们想为原始的HTML标签增加自定义属性，我们必须为该属性加上前缀 data- 否则React不会为我们渲染这个自定义属性
三、UI / Component / Props / State
1 . 函数自动绑定。在es5里，组件内部的方法都会自动绑定到组件实例上。当我们使用es6时，才有必要绑定this
// es6
<div onClick={this.tick.bind(this)}>
// 箭头函数
<div onClick={() => this.tick()}>
// 预绑定
constructor(props) {
//...
this.tick = this.tick.bind(this);
}
<div onClick={this.tick}>
2. 事件代理。React 不会真正地为元素节点创建箭头事件和对应处理函数。当React启动的时候，它会把所有的事件箭头放到单独的一个根节点上面。当有元素插入或者被移除，对应的事件处理函数也会被添加或移除。
3. 组件就是一个状态机。当我们使用setState的时候，React会根据新的state，非常高效(diff算法)地重新渲染组件
4. 如何构建一个可复用的组件。( 1 ) Prop validation(类型验证) ( 2 ) Default Props Values(设置默认props值) ( 3 ) 由props驱动内部state
5 . es6语法。( 1 ) 没有自动绑定this ( 2 ) 没有Mixin
6 . 修复setState为'异步'所带来的副作用
// Correct this.setState((prevState, props) => ({ counter: prevState.counter + props.increment })); // 注意：自加操作符 要写成++count(先加再返回)，而不是count++(返回了原值再加 无效果)
四、表单
1 . 表单组件的某些属性(props)能够通过交互发生改变。value属性( <input><textarea> )、checked( checkbox、radio )、selected( <option> )。同时，当这些表单组件的state或者value改变的时候，也会触发挂载到该组件上的onChange( )事件
2 . 受限(被控制 controlled component)当表单组件设置了value时(比如<input type='text' value='hello' >)，就变成了controlled components，你会发现你的输入对表单并没有效果。这是因为React将该组件的value值声明为'hello'了。通常的处理是，获取input的React元素(refs、event)，并在它上面挂载onChange方法
getInitialState: function() {
return {value: 'Hello!'};
},
handleChange: function(event) {
this.setState({value: event.target.value});
},
render: function() {
return (
<input
type="text"
value={this.state.value}
onChange={this.handleChange}
/>
);
}
3 . Uncontrolled component 不受限的表单控件。<input type='text'/> 向该表单组件进行输入，会立刻从view层得到反应：我们的输入有效了，而不是像上面的例子一样，怎么输入都没有效果。如果要对输入值进行监听，可以设置onChange方法并挂载到该组件上面。同时，我们可以设定默认输入值defaultValue、defaultChecked <input type='text' defaultValue='hello' />
4 . select表单组件
// 单选
<select value="B">
<option value="A">Apple</option>
<option value="B">Banana</option>
<option value="C">Cranberry</option>
</select>
// 多选
<select multiple={true} value={['B', 'C']}>.
五、浏览器环境 / Refs
1 . Virtual dom( 虚拟dom )。React是很快的，因为它从不直接操作DOM。React在内存中维护一个快速响应的DOM描述符。组件内部的render( )方法也会返回一个DOM的描述符。react通过对比内存中的描述符和组件的描述符，会选择最快的方式更新浏览器的Dom视图。另外，我们在React内部使用的'事件系统'，其实全都是React内部的'虚拟事件'，React会确保这些事件和事件对象都符合w3c规范,并以一种高性能的方式跨浏览器。
2 . 组件通常有三种类型的生命周期
( 1 ) Mounting(这是一个组件初始化的生命周期)
1 . getInitialState( ) 一个stateful的组件应该在这个时候声明并返回一个state对象
2 . componentWillMount( ) 准备插入到Dom
3 . componentDidMount( ) 已经插入到Dom
( 2 ) Updating(这是一个组件re-render重绘它自己的时候所要经历的生命周期)
1. componentWillReceiviProps( nextProps ) 第一个参数是将接受到一个props的新值
2 . shouldComponentUpdate(nextProps, nextState) 参数分别是props和state的新值
3 . componentWillUpdate(nextProps, nextState)同上。在这个生命周期里，我们不能再调用setState
4 . compoentDidUpdate( preProps, preState )参数分别是props和state的上一个值
( 3 ) Unmounting
1. componentWillUnmount( ) 当组件被移除前一刻会被执行
3 . React.render( )方法会返回一个virtual Dom元素，即组件的"引用" var helloInstannce = ReactDom.render(...) ，当这个组件是stateless的话，会返回null。注意：当我们使用JSX的时候，返回的只是一个ReactElement var hell = <Hello />
4 . 通过refs获取组件的实例
<input ref="myInput" />
var input = this.refs.myInput;
var inputValue = input.value;
六、Tips
1 . 行内样式。React会为某些具备单位的css属性默认添加 'px' 单位 var divStyle = {height: 10}; // rendered as "height:10px"
var divStyle = {
color: 'white',
msTransition: 'all'
};
ReactDOM.render(<div style={divStyle}>Hello</div>, Node);
2 . If-else 在JSX中的使用方法
if-else 在JSX里面是没有效果的，因为JSX仅仅是一些调用函数和构造函数对象的语法糖。对于这个问题，React推荐有两种方法。( 1 ) 调用逻辑和render函数里面的return进行分离 ( 2 ) 在render函数内使用立即执行函数(显然第一种比较好)
// --- 1 ---
var loginButton;
if (loggedIn) {
loginButton = <LogoutButton />;
} else {
loginButton = <LoginButton />;
}
return (
<nav>{loginButton}</nav>
);
// --- 2 ---
return (
<section>
<p>
{(() => {
switch (this.state.color) {
case "blue": return "#0000FF";
default: return "#FFFFFF";
}
})()}
</p>
</section>
);
3 . 当我们使用 this.props.children 的时候要当心。虽然它大多数情况下会返回一个component数组 ( Array.isArray(this.props.children) => true 但当只有一个component的时候它只会返回一个component，而不是一个Array
4 . componentDidMount( ) 一个添加Dom监听和初始化拉取数据的好地方
// --- 1 ---
componentDidMount: function() {
window.addEventListener('resize', this.handleResize);
}
// --- 2 ---
componentDidMount: function() {
this.serverRequest = $.get(this.props.source, function (result) {
var lastGist = result[0];
this.setState({
username: lastGist.owner.login,
lastGistUrl: lastGist.html_url
});
}.bind(this));
},
七、插件
1 . Animation( 动画 ) —— ReactTransitionGroup，这个插件能够让组件在插入或者离开Dom的时候进行一段小动画。
// 1 . 基本用法
var ReactCSSTransitionGroup = require('react-addons-css-transition-group');
// in render function ...
<ReactCSSTransitionGroup transitionName="example" transitionEnterTimeout={500} transitionLeaveTimeout={300}>
{items}
</ReactCSSTransitionGroup>
// in style.css
.example-enter {
opacity: 0.01;
}
.example-enter.example-enter-active {
opacity: 1;
transition: opacity 500ms ease-in;
}
.example-leave {
opacity: 1;
}
.example-leave.example-leave-active {
opacity: 0.01;
transition: opacity 300ms ease-in;
}
( 2 ) 初始化动画 <ReactCSSTransitionGroup transitionName="example" transitionAppear={true} transitionAppearTimeout={500}>
( 3 ) 自定义动画 <ReactCSSTransitionGroup transitionName{{enter:'enter',enterActive:'enterActive',leave:'leave',leaveActive:'leaveActive',appear:'appear',appearActive:'appearActive'} }>
( 4 ) 禁止动画 transitionEnter={false} or transitionLeave={false}
( 5 ) 渲染不同的组件 <ReactTransitionGroup component="ul">
2 . 双向绑定插件 —— react-addons-linked-state-mixin
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')} />;
}
});
3 . PureRenderMixin
// es6 import PureRenderMixin from 'react-addons-pure-render-mixin'; class FooComponent extends React.Component { constructor(props) { super(props); this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this); } render() { return <div className={this.props.className}>foo</div>; } }