React学习笔记
React特点
1.一套用于构建用户页面的js框架
2.基于组件开发
3.虚拟DOM
这是React最重要的特性，放进内存，最小，差异部分更新 ，使得性能卓越，开销很小（频繁的DOM操作，会造成资源浪费）
diff算法: 一个比较计算层次结构区别的算法，用来计算DOM之间的差异
4.数据流（data flow） 单向数据流
JSX语法
1. JSX是Javascript和XML联系在了一起，它不能直接运行，必须使用翻译器（bable）将它转换为JS才能运行。
2. React发明了JSX，利用HTML语法来创建虚拟DOM。当遇到 <，JSX就当HTML解析，遇到 { 就当JavaScript解析。
3.我们可以在 JSX 中使用 JavaScript 表达式。表达式写在花括号 {} 中。
4.在JSX中使用样式和真实的样式也很类似，通过style属性来定义，但和真实DOM不同的是，属性值不能是字符串而必须为对
象。要明确记住,{ }里面是JS代码,这里传进去的是标准的JS对象。在JSX中可以使用所有的的样式，基本上属性名的转换规范就是
将其写成驼峰写法，例如“background-color”变为“backgroundColor”, “font-size”变为“fontSize”，这和标准的
JavaScript操作DOM样式的API是一致的。
5. JSX扩展属性
使用ES6的语法
var props={ };
props.foo="1";
props.bar="1";
`
hello world
`6。自定义属性
HTML5给出了方案，凡是以data-开头的自定义属性，可渲染到页面
7.显示HTML 显示一段HTML字符串，而不是HTML节点
借助一个属性 _html
`
hello world
`}}4）事件绑定 调用bind方法(设定作用域，要传递的参数）
ReactDOM.render是React的最基本的方法，用于将模板转换为html语言，并插入到DOM检点中。（什么东西渲染到哪里去）
组件及属性
事件的使用
状态及应用
状态组件应用
通过this.state改变视图
1. props属性：组件可以定义初始值，自己不可更改props属性值，只允许从父组件中传递过来：
2. state属性：组件用来改变自己状态的属性，通常使用setState({key:value})来改变属性值，不能使用this.state.xxx来直接改变，setState({key:value})方法会触发界面刷新。ReactJs内部会自动监听state属性的变化，一旦发生变化，就会主动触发组件的render方法来更新虚拟DOM结构。
3. 虚拟DOM：将真实的DOM结构映射成一个JSON数据结构
对于经常改变的数据且需要刷新界面显示，可以使用state。对于不需要改变的属性值可以使用props。React Native建议由顶层的父组件定义state值，并将state值作为子组件的props属性值传递给子组件，这样可以保持单一的数据传递。
var ShowEditor=React.createClass(
{
getInitialState:function(){
return {value:'你可以在这里输入文字'};
},
handleChange:function(){
this.setState({value:React.findDOMNode(this.refs.textarea).value});
},
render:function(){
return (
输入
输出
{this.state.value}
);
}
}
);
React.render(组件生命周期
我们把组件从装载,到渲染，再到卸载当做一次生命周期，也就是组件的生存状态从装载开始到卸载为止，期间可以根据属性的变化进行多次渲染。
生命周期的方法就是组件在不同虚拟DOM中不同状态的描述。
挂载
挂载指的是组件的实例被创建并插入到DOM中，挂载会调用如下的方法
constructor ：RN组件的构造方法，它在RN组件被挂载前被调用（在constructor中初始化状态state，然后在需要修改时调用setState方法）
1.创建阶段
getDefaultProps方法：处理props的默认值，在React.createClass时调用。
props是一个对象，组件用来接收外部参数，组件内部不能修改props，只能通过父组件来修改，
2.实例化阶段
触发getInitialState, componentWillMount, render, componentDidMount这四个函数的回调
componentWillMount()，组件开始装载之前调用，在一次生命周期中只会执行一次。
componentDidMount()，组件完成装载之后调用，在一次生命周期中只会执行一次，从这里开始就可以对组件进行各种操作了，比如在组件装载完成后要显示的时候执行动画。
3.更新阶段
componentWillUpdate(object nextProps, object nextState)，组件属性更新之前调用，每一次属性更新都会调用 componentDidUpdate(object prevProps, object prevState)，组件属性更新之后调用，每次属性更新都会调用
4.销毁阶段
componentWillUnmount()，组件卸载之前调用
组件间通信
1.子组件如何调用父组件
this.props
2.父组件如何调用子组件
ref可以拿到子组件的所有属性
首先用属性ref给组件取个名字
this.refs.名字.getDOMNode().
（补充：获取真实的DOM节点
组件并不是真实的 DOM 节点，而是存在于内存之中的一种数据结构，叫做虚拟 DOM （virtual DOM）。只有当它插入文档以后，才会变成真实的 DOM 。
有时需要从组件获取真实 DOM 的节点，这时就要用到 ref 属性。
为了获取真是DOM节点，html元素必须有一个 ref 属性，然后 this.refs.[refName] 就会返回这个真实的 DOM 节点。需要注意的是，由于 this.refs.[refName] 属性获取的是真实 DOM ，所以必须等到虚拟 DOM 插入文档以后，才能使用这个属性，否则会报错。)