react.js

http://huziketang.com/books/react/

1.注意：直接使用class在react.js的元素上添加http://write.blog.csdn.net/postedit/73832136类名如<div class="xxx">这种方式是不合法的。因为class是JavaScript的关键字，所以react.js中定义了一种新的方式：className来帮助我们给元素添加类名。

还有一个特例就是for属性，例如<label for='male'>Male</label>,因为for也是JavaScript的关键字，所以在JSX用HTMLFor替代，即<label htmlFor='male'>Male</label>。而其他的HTML属性例如style，data-*等就可以像普通的HTML属性那样直接添加上去。

http://write.blog.csdn.net/postedit/73832136

2.注意：自定义的组件都必须要用大写字母开头，普通的HTML标签都用小写字母开头。

3.注意：当需要为某个元素监听某个事件的时候，只需要简单地给它加上on就可以了。而且不需要考虑不同浏览器兼容性的问题，React.js都帮我们封装好这些细节了。但是这些事件都必须要用驼峰命名法。

没有经过特殊处理的话，这些on的事件只能用在普通的HTML的标签上，而不能用在组件标签上。也就是说，<Header onClick={...} />这样的写法不会有什么效果的。这一点要注意，但是有办法可以做到这样的绑定，以后会提及。现在只要记住一点就可以了：这些on的事件监听只能用在普通的HTML的标签上，而不能用在组件标签上。

4.注意：setState方法由父类Component所提供。当我们调用这个函数的时候，React.js会更新组件的状态state，并且重新调用render方法，然后再把render方法所渲染的最新的内容显示到页面上。

当我们要改变组件的状态的时候，不能直接用this.state = XXX这种方式来修改，如果这样做React.js就没办法知道你修改了组件的状态，它也就没办法更新页面。所以，一定要用React.js提供的setState方法，它接收一个对象或者函数作为参数。

传入一个对象的时候，这个对象表示该组件的新状态。但你只需要传入需要更新的部分就可以了，而不需要传入整个对象。

5.当调用setState的时候，React.js并不会马上修改state。而是把这个对象放到一个更新队列里面，稍后才会从队列当中把新的状态提取出来，然后再触发组件更新。这一点要好好注意。

setState的第二中使用方式，可以接受一个函数作为参数。React.js会把上一个setState的结果传入这个函数，你就可以使用该结果进行运算、操作，然后返回一个对象作为更新state的对象。这样就可以达到上述的利用上一次setState结果进行运算的效果。

6.state vs props

state的主要作用是用于组件保存、控制、修改自己的可变状态。state在组件内部初始化，可以被组件自身修改，而外部不能访问也不能修改。你可以认为state是一个局部的、只能被组件自身控制的数据源。state中状态可以通过this.setState方法进行更新，setState会导致组件的重新渲染。

props的主要作用是让使用该组件的父组件可以传入参数来配置该组件。它是外部传进来的配置参数，组件内部无法控制也无法修改。除非外部组件主动传入新的props，否则组件的props永远保存不变。

state和props有着千丝万缕的关系。它们都可以决定组件的行为和显示形态。一个组件的state中的数据可以通过props传给子组件，一个组件可以使用外部传入的props来初始化自己的state。但是它们的职责其实非常明晰分明：state是让组件控制自己的状态，props是让外部对组件自己进行配置。

如果你觉得还是搞不清state和props的使用场景，那么请记住一个简单的规则：尽量少地用state，尽量多地用props。

7.渲染列表数据

如果你往{}放一个数组，React.js会帮你把数组里面一个个元素罗列并且渲染出来。知道这一点以后你就可以知道怎么用循环把元素渲染到页面上：循环上面用户数组里面的每一个用户，为每个用户数据构建一个JSX，然后把JSX放到一个新的数组里面，再把新的数组插入render方法的JSX里面。

对于用表达式套数组罗列到页面上的元素，都要为每个元素加上key属性，这个key必须是每个元素唯一的标识。一般来说，key的值可以直接后台数据返回的id，因为后台的id都是唯一的。

8.实战分析：评论功能

通过defaultProps设置默认配置防止报错

9.前段应用状态管理——状态提升

当某个状态被多个组件依赖或者影响的时候，就把该状态提升到这些组件的最近公共父组件中去管理，用props传递数据或者函数来管理这种依赖或者影响的行为。

 你可以看到React.js并没有提供好的解决方案来管理这种组件之间的共享状态。在实际项目当中状态提升并不是一个好的解决方案，所以我们后续会引入Redux这样的状态管理工具来帮助我们管理这种共享状态，但是在讲解Redux之前，我们暂时采取状态提升的方式来进行管理。

对于不会被多个组件依赖和影响的状态（例如某种下拉菜单的展开和收起状态），一般来说只需要保存在组件内部即可，不需要提升或特殊的管理。

10.挂载阶段的组件的生命周期（一）

React.js将组件渲染，并且构造DOM元素然后塞入页面的过程称为组件的挂载。

组件的挂载过程：

——>constructor()

——>componentWillMount()

——>render()

//然后构造DOM元素插入页面

——>componentDidMount()

React.js控制组件在页面上挂载和删除过程里面几个方法：

componentWillMount：组件挂载开始之前，也就是在组件调用render方法之前调用。

componentDidMount：组件挂载完成以后，也就是DOM元素已经插入页面后调用。

componentWillUnmount：组件对应的DOM元素从页面中删除之前调用。

11.挂载阶段的组件的生命周期（二）

一些组件启动的动作，包括像AJAX数据的拉取操作、一些定时器的启动等，就可以放在componentWillMount里面进行。例如：

componentWillMount(){

      ajax.get('http://json-api.com/user',(userData) => {

           this.setState({userData})

     })

}

总结：

我们一般会把组件的state的初始化工作放在constructor里面去做；在componentWillMount进行组件的启动工作，例如Ajax数据拉取、定时器的启动；组件从页面上销毁的时候，有时候需要一些数据的清理，例如定时器的清理，就会放在componentWillUnmount里面去做。

一般来说，有些组件的启动工作是依赖DOM的，例如动画的启动，而componentWillMount的时候组件还没挂载完成，所以没法进行这些启动工作，这时候就可以把这些操作放在componentDidMount当中。

setState只能在已经挂载或者正在挂载的组件上调用

http://write.blog.csdn.net/postedit/73832136

12.更新阶段的组件生命周期

组件的挂载知道是将组件渲染并且构造DOM元素然后插入页面的过程。这是一个从无到有的过程，React.js提供一些生命周期函数可以给我们在这个过程中做一些操作。

除了挂载阶段，还有一种“更新阶段”。说白了就是setState导致React.js重新渲染组件并且把组件的变化应用到DOM元素上的过程，这是一个组件的变化过程。而React.js也提供了一系列的生命周期函数可以让我们在这个组件更新的过程执行一些操作。

关于更新阶段的组件生命周期：

（1）shouldComponentUpdate(nextProps,nextState)：你可以通过这个方法控制组件是否重新渲染。如果返回false组件就不会重新渲染。这个生命周期在React.js性能优化上非常有用。这个方法在初始化render时不会被调用。

（2）componentWillReceiveProps(nextProps)：组件从父组件接收到新的props之前调用。这个方法在初始化render时不会被调用。

（3）componentWillUpdate()：组件开始重新渲染之前调用。这个方法在初始化render时不会被调用。

（4）componentDidUpdate()：组件重新渲染并且把更改变更到真实的DOM以后调用。这个方法在初始化render时不会被调用。

13.ref和React.js中的DOM操作

在React.js当中你基本不需要和DOM直接打交道。以前我们通过手动DOM操作进行页面更新（例如借助jQuery），而在React.js当中可以直接通过setState的方式重新渲染组件，渲染的时候可以把新的props传递给子组件，从而达到页面更新的效果。

但是React.js并不能完全满足所有DOM操作需求，有些时候我们还是需要和DOM打交道。比如说你想进入页面以后自动focus到某个输入框，你需要调用input.focus()的DOM API ，比如说你想动态获取某个DOM元素的尺寸来做后续的动画，等等。

React.js当中提供了ref属性来帮助我们获取已经挂载的元素的DOM节点，你可以给某个JSX元素加上ref属性：

class AutoFocusInput extends Component {

      componentDidMount(){

            this.input.focus()

       }

      render(){

            return (

                <input ref = {(input) => this.input = input } />

             )

      }

}

ReactDom.render(

        <AutoFocusInput />,

         document.getElementById('root')

)

可以看到我们给input元素加了一个ref属性，这个属性值是一个函数。当input元素在页面上挂载完成以后，React.js就会调用这个函数，并且把这个挂载以后的DOM节点传给这个函数。在函数中我们把这个DOM元素设置为组件实例的一个属性，这样以后我们就可以通过this.input获取到这个DOM元素。

然后我们就可以在componentDidMount中使用这个DOM元素，并且调用this.input.focus()的DOM API。整体就达到了页面加载完成就自动focus到输入框的功能（大家可以注意到我们用上了componentDidMount这个组件生命周期）。

我们可以给任意代表HTML元素标签加上ref从而获取到它DOM元素然后调用DOM API。但是记住一个原则：能不用ref就不用。

顺带一提的是，其实可以给组件标签页加上ref，例如：

<Clock ref = {(clock) => this.clock = clock} />

这样获取到的是这个Clock组件在React.js内部初始化的实例。但这并不是什么常用的做法，而且也并不建议这么做。

14.dangerouslySetHTML和style属性

出于安全考虑的原因（XSS攻击），在React.js当中所有的表达式插入的内容都会被自动转义，就相当于jQuery里面的text（...）函数一样，任何的HTML格式都会被转义掉。那要怎么才能做到设置动态HTML结构的效果呢？React.js提供了一个属性dangerouslySetInnerHTML，可以让我们动态设置元素的innerHTML。

需要给dangerousSetInnerHTML传入一个对象，这个对象的_html属性值就相当于元素的innerHTML，这样我们就可以动态渲染元素的innerHTML结构了。

style

React.js中的元素的styles属性的用法和DOM里面的style不大一样，普通的HTML中的：

<h1 style='font-size: 12px; color: red'>React.js</h1>

在React.js中你需要把CSS属性变成一个对象在传给元素：

<h1 style={{fontSize: '12px',color: 'red'}}>React.js</h1>

style结束一个对象，这个对象里面是这个元素的CSS属性键值对，原来CSS属性中带 - 的元素都必须要去掉 - 换成驼峰命名，如 font-size换成fontSize,text-align 换成textAlign.

用对象作为style方便我们动态设置元素的样式。我们可以用props或者state中的数据生成样式对象在传给元素，然后用setState就可以修改样式，非常灵活：

<h1 style={{fontSize: ‘12px’,color:this.state.color}}>React.js</h1>

只要简单地setState（{color：’blue‘}）就可以修改元素的颜色成蓝色。