React 学习笔记（一）

笔记参考：阮一峰react入门教程

一、初识React

1.特点

基于组件，组件里面有自己的state，用组件来做复杂的UI；
用JavaScript语言逻辑而不是模板；
当你改变数据的时候它可以快速更新；
React不是一个完整的MVC，MVVM框架；
React跟Web Components不冲突；
React的特点是“轻”，渲染、响应非常快；
组件化的开发思路，高度可重用。

2.看看一个简单的组件例子

react组件用render（）方法传入数据和返回。下面这个例子用了一种长得像XML的语法——jsx。输入的数据可以通过render()的this.props来传进组件。

class HelloMessage extends React.Compontent {
    render() {
        return Hello {this.props.name};
    }
}
ReactDOM.render(,mountNode);

二、各种例子

1. HTML模板

body内的

运行结果截图：

Paste_Image.png

ReactDOM.render 是 React 的最基本方法，用于将模板转为 HTML 语言，并插入指定的 DOM 节点。render()方法的第一个参数是你要插入的模板，第二个参数是指定插入的节点的位置。

2. 遍历一个数组插入节点中
对names中的每一个元素都执行一个匿名函数，这个匿名函数的参数name就是当前的遍历到的names的某一个元素，用这个元素替换“Hello {name}”的name位置，然后返回这个“h1”元素，将每一个返回的h1元素都插入到由document.getElementById("example")指定的节点位置，即插入到id值为“example”的div节点中。

Paste_Image.png

3. 插入JavaScript变量
Paste_Image.png

4. 封装组件
Paste_Image.png

格式：
var 组件名(首字母一定大写) = React.createClass({
   render:function() {
       return 返回的模板
   }
});
this.props.name传入参数

组件类只能包含一个顶层标签，即return 只能返回一个标签，不可以像下面这样的return：
return haha
hehe//这是错误的
添加组件属性，有一个地方需要注意，就是 class 属性需要写成 className ，for 属性需要写成 htmlFor ，这是因为 class 和 for 是 JavaScript 的保留字。

5. this.props.children
6. PropsType
Paste_Image.png

propTypes用来设置属性类型，上例中设置了string类型，所以在为组件设置title值的时候必须为string类型，如果将其设置为数字，则会报错，例如：

Paste_Image.png

Paste_Image.png

可以这样：

Paste_Image.png

Paste_Image.png

注意不要直接把123写到title里：

Paste_Image.png

设置默认的title值：

QQ图片20161124235909.png

Paste_Image.png

7.refs 和 this.state
getInitialState:设置初始的state值；

handleClick:自定义的一个方法，用来处理点击事件。为按钮设置了onClick={this.handleClick}后，当点击按钮时就会调用这个方法，进行相应的处理；

this.setState():设置this.state;

this.refs.myTextInput:ref值为myTextInput的元素；

动态的数据不用 this.props 获取，用 this.state;

8. 表单
三、组件的生命周期

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

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)：组件判断是否重新渲染时调用