今天完成的事情：

看了点React的东西

明天计划的事情：

接着熟悉下React

遇到的问题：

暂无

收获：

React 起源于 Facebook 的内部项目，于2013年5月开源。先总结一下：

    React不是一个完整的MVC框架，最多可以认为是MVC中的V（View），甚至React并不非常认可MVC开发模式；

    React的服务器端Render能力只能算是一个锦上添花的功能，并不是其核心出发点，事实上React官方站点几乎没有提及其在服务器端的应用；

    有人拿React和Web Component相提并论，但两者并不是完全的竞争关系，你完全可以用React去开发一个真正的Web Component；

    React不是一个新的模板语言，JSX只是一个表象，没有JSX的React也能工作。

    下载地址：

ReactJS官网地址：http://facebook.github.io/react/

Github地址：https://github.com/facebook/react

https://facebook.github.io/react/downloads.html

这里面有所需要引用的js文件： https://github.com/ruanyf/react-demos/tree/master/build

    ReactJs下载非常简单，下载完成后，看到的是一个压缩包。解压后，我们新建一个html文件，引用里面的 react.js 和 react-dom.js 这两个js文件以及browser.js。并非必需引入browser.js

    引入它的作用是使浏览器支持babel，你可以使用ES2015进行编码。如果你用ES5，可以不引入。

到这里我们就可以开始编写代码了，首先我们先来认识一下ReactJs里面的ReactDOM.render方法：

ReactDOM.render 是 React 的最基本方法，用于将模板转为 HTML 语言，并插入指定的 DOM 节点。

下面我们在script标签里面编写代码，来输出Hello，world，代码如下：

上面代码有两个地方需要注意。首先，最后一个 <script> 标签的 type 属性为 text/babel 。这是因为 React 独有的 JSX 语法，跟 JavaScript 不兼容。凡是使用 JSX 的地方，都要加上 type="text/babel" 。

    react.js 是 React 的核心库，

    react-dom.js 是提供与 DOM 相关的功能，

    Browser.js 的作用是将 JSX 语法转为 JavaScript 语法，这一步很消耗时间，实际上线的时候，应该将它放到服务器完成。（转换只要在 浏览器解析之前就可以了）

上面代码中， browser.js 是Babel提供的转换器脚本，可以在浏览器运行。用户的ES6脚本放在 script 标签之中，但是要注明 type="text/babel" 。

上面代码中， browser.js 是Babel提供的转换器脚本，可以在浏览器运行。用户的ES6脚本放在 script 标签之中，但是要注明 type="text/babel" 。

注意，网页中实时将ES6代码转为ES5，对性能会有影响。生产环境需要加载已经转码完成的脚本。下面是如何将代码打包成浏览器可以使用的脚本，以 Babel 配合 Browserify 为例。首先，安装 babelify 模块：Babel 入门教程 （这个自阅，暂时先让他影响着，先把门入了）。

    ReactDOM.render()：

ReactDOM.render 是 React 的最基本方法。

用于将模板转为 HTML 语言，并插入指定的 DOM 节点。

上面例子里的代码就是将一个 h1 标题，插入到 example 节点里面。

    JSX 语法：

HTML 语言直接写在 JavaScript 语言之中，不加任何引号，这就是JSX 的语法。

允许 HTML 与 JavaScript 的混写。

体现了 JSX 的基本语法规则：遇到 HTML 标签（以 < 开头），就用 HTML 规则解析；遇到代码块（以 { 开头），就用 JavaScript 规则解析。

    ReactJS组件

ReactJS是基于组件化的开发，React 允许将代码封装成组件（component），然后像插入普通 HTML 标签一样，在网页中插入这个组件。

React.createClass 方法就用于生成一个组件类。

写第一个组件Greet，有一个name属性，然后输出hello + name的值：

看到这段代码，接触过AngularJS的朋友们是不是有一种熟悉的感觉，不过这里有几点需要注意：

1）获取属性的值用的是this.props.属性名

2）创建的组件名称首字母必须大写。

3）为元素添加css的class时，要用className。

4）组件的style属性的设置方式也值得注意，要写成style={{width: this.state.witdh}}。

    组件状态

组件免不了要与用户互动，React 的一大创新，就是将组件看成是一个状态机，一开始有一个初始状态，然后用户互动，导致状态变化，从而触发重新渲染 UI 。

下面写一个文本框和一个button，通过点击button可以改变文本框的编辑状态，禁止编辑和允许编辑。通过这个例子来理解ReactJS的状态机制。

使用到了一个方法getInitialState,这个函数在组件初始化的时候执行，必需返回NULL或者一个对象。这里我们可以通过this.state.属性名来访问属性值，这里我们将enable这个值跟input的disabled绑定，当要修改这个属性值时，要使用setState方法。我们声明handleClick方法，来绑定到button上面，实现改变state.enable的值。

    原理分析：

当用户点击组件，导致状态变化，this.setState 方法就修改状态值，每次修改以后，自动调用 this.render 方法，再次渲染组件。

这里值得注意的几点如下：

1）getInitialState函数必须有返回值，可以是NULL或者一个对象。

2）访问state的方法是this.state.属性名。

3）变量用{}包裹，不需要再加双引号。

    组件的生命周期

组件的生命周期分成三个状态：

    Mounting：已插入真实 DOM

    Updating：正在被重新渲染

    Unmounting：已移出真实 DOM

React 为每个状态都提供了两种处理函数，will 函数在进入状态之前调用，did 函数在进入状态之后调用，三种状态共计五种处理函数。

    componentWillMount()

    componentDidMount()

    componentWillUpdate(object nextProps, object nextState)

    componentDidUpdate(object prevProps, object prevState)

    componentWillUnmount()

此外，React 还提供两种特殊状态的处理函数。

    componentWillReceiveProps(object nextProps)：已加载组件收到新的参数时调用

    shouldComponentUpdate(object nextProps, object nextState)：组件判断是否重新渲染时调用

    下面代码在hello组件加载以后，通过 componentDidMount 方法设置一个定时器，每隔100毫秒，就重新设置组件的透明度，从而引发重新渲染。

此外，React 还提供两种特殊状态的处理函数。

    componentWillReceiveProps(object nextProps)：已加载组件收到新的参数时调用

    shouldComponentUpdate(object nextProps, object nextState)：组件判断是否重新渲染时调用

    下面代码在hello组件加载以后，通过 componentDidMount 方法设置一个定时器，每隔100毫秒，就重新设置组件的透明度，从而引发重新渲染。

    主要是理解这些功能的使用，其次就是

    this.props.children ：表示组件的所有子节点。

    PropTypes：用来验证组件实例的属性是否符合要求。

    表单：文本输入框的值，不能用 this.props.value 读取，而要定义一个 onChange 事件的回调函数，通过 event.target.value 读取用户输入的值。textarea 元素、select元素、radio元素都属于这种情况。

    Ajax：通常是通过 Ajax 请求从服务器获取，可以使用 componentDidMount 方法设置 Ajax 请求，等到请求成功，再用 this.setState 方法重新渲染 UI，可以使用 jQuery 完成 Ajax 请求。

    ReactJS小结

    关于ReactJS就先学习到这里了，下面来总结一下，主要有以下几点：

1、ReactJs是基于组件化的开发，所以最终你的页面应该是由若干个小组件组成的大组件。

2、可以通过属性，将值传递到组件内部，同理也可以通过属性将内部的结果传递到父级组件(留着研究)；要对某些值的变化做DOM操作的，要把这些值放到state中。

3、为组件添加外部css样式时，类名应该写成className而不是class;添加内部样式时，应该是style={{opacity: this.state.opacity}}而不是style="opacity:{this.state.opacity};"。因为 React 组件样式是一个对象，所以第一重大括号表示这是 JavaScript 语法，第二重大括号表示样式对象。

4、组件名称首字母必须大写。

5、变量名用{}包裹，且不能加双引号。