一、React介绍
what？是一个开源的（为数据提供渲染视图）的js库--》ui层
fb、instgram、社区公司共同维护。美团、阿里。。。
why？ fb 问题：视图更新频繁-》浏览器性能 数据--》业务逻辑复杂
virtualDOM、单向数据流
when？ 数据大量变化 视图更新频繁，（简单的页面、应用如果采用react 不建议）
React历史：11年，fb用在newsFeed；12年 部署instgram；13年 开放源代码；15年 React Native，16年 发布v15
React特点：
①声明式设计：采用声明式，轻松描述应用
②JSX：JavaScriptXml语法，是js的扩展
③组件：构建组件，提高复用率，降低测试难度，提高开发速度
④单向数据流
⑤高效、灵活
不支持IE8以下的浏览器。
二、环境搭建
reactjs.com -->https://facebook.github.io/react/
方式1：通过3个文件（react.js react-dom.js browser.js）
方式2：命令行
三、核心概念
1、jsx语法
render方法：是React的最基本的方法，用于将第一个参数所对应的标签 转换为html语言，插入到指定的DOM节点
jsx语法--》type='text/babel'
jsx语法：
如果遇到<,就会使用html解析
如果遇到{，就会使用js去解析
练习：
通过jsx语法 大家去测试
逻辑运算、3目运算、算术运算
2、组件
创建组件：var HelloMsg = React.createClass();
使用组件：<HelloMsg/>
注意事项：
①必须指定render方法
②组件名称首字母必须是大写的
③在组件中如果要返回多个元素，必须放在一个容器中。
JSX语法让React组件：支持自定义元素和组件，结合运算或者表达式添加数据，让组件变得更强大。
将多个组件 ，整合在一起，就可以构造更复杂的页面展示效果，一般称之为复合组件。
3、props（值的传递--》单向数据流）
指定属性
怎么读取属性所对应的值： {this.props.属性名称}
在线babel编译器：https://babeljs.io/repl
练习：使用props重构登录窗口
this.props.children 组件的所有子节点：没有子节点-》undefined 1个-》object 多个-》数组
React.Children
4、VirtualDOM （ref--》组件中找到真实的元素）
就是一种数据结构，各种各样的组件。
更新了数据，VDOM结合diff的算法。
通过组件获取真实的DOM节点，可以通过ref属性去实现。
指定ref ：<组件 ref='名称'>
通过读取ref对象的属性值拿到元素： this.refs.名称
练习：
input
input
button->求和
VDOM的工作方式：
1、创建的各个组件就是虚拟DOM，存在内存
2、需要更新视图时，React会通过diff的算法对比虚拟DOM和真实DOM
3、找到最优方案：更新DOM的成本最低的方法
4、更新
例子：props 传递属性
练习：创建组件AComponent （input），BComponent（button：获取值），MainComponent（AComponent、BComponent），指定按钮要去显示内容。
B组件按钮点击的时候 通过ref 去调用A组件input得到用户输入的值
①A组件用户输入的内容保存到Main组件中
main组件中定义一个方法，将方法传递给A组件，在onChange对应的处理函数调用main组件方法
②B组件按钮点击去获取Main组件中上一步保存的内容
https://github.com/facebookincubator/create-react-app
一、state
state状态：只要更新state，就会根据state重新渲染用户界面，react来处理如何最高效的更新DOM。（类似ng中的方向1数据绑定）
how？
初始化状态： getInitialState 定义状态（返回一个对象）
设置状态： setState({}) 修改状态
读取状态： this.state.状态名称
练习：周六Main、A、B通信的案例，数据存储的result替换成状态来完成数据的读写。
二、React组件的生命周期
生命周期的3个阶段：
mount 插入到DOM
update 重新渲染
unmount 从DOM移除
3个阶段的处理函数：
componentWillMount() 准备插入
componentDidMount() 已经插入
componentWillUpdate(props，state) 准备更新
componentDidUpdate(props，state) 已经更新
componentWillUnmount（） 准备从DOM中移除
练习： state和生命周期的处理函数
在组件插入到真实DOM节点之后，启动定时器修改组件的透明度（0-1）
状态：透明度的值 opacityValue
组件：
style='opacity:{this.state.opacityValue}'--->
style={{opacity:this.state.opacityValue}}
三、事件
将React组件中的方法分为两大类：
①React自有的方法：生命周期、render。。
ComponentWill/DidMount/Update/Unmount/render/getInitialState
②用户自定义的方法，遵循驼峰式命名：handleChange handleClick （handle+eventName）
采用标准的事件对象。
基于事件，完成功能：
组件，div，鼠标的滚轮在div上滚动时，改变背景色(随机颜色)
①创建组件
②指定事件 onWheel handleWheel
③状态（初始化、设置、读取）
四、表单组件
表单元素有以下的属性设置都是受控组件：
value (input textarea)
checked (checkbox radio)
selected( option)
其余的都是非受控组件。
结合着onChange、value/checked一起来解决受控组件的问题。
五、toDoList
功能点：
①输入数据，在列表中增加一个待做事项
②点击delete按钮，从列表中删除一个事项
步骤1：将应用划分成组件 ToDoBox:ToDoInput + ToDoList(多个ToDoItem构成)
步骤2：创建组件，并先能模拟数据显示出来
步骤3: add
①初始化状态：数组
②添加向指定数组插入一条数据
③显示
步骤4:delete
就是从数组中删除一条数据。
what？是一个开源的（为数据提供渲染视图）的js库--》ui层
fb、instgram、社区公司共同维护。美团、阿里。。。
why？ fb 问题：视图更新频繁-》浏览器性能 数据--》业务逻辑复杂
virtualDOM、单向数据流
when？ 数据大量变化 视图更新频繁，（简单的页面、应用如果采用react 不建议）
React历史：11年，fb用在newsFeed；12年 部署instgram；13年 开放源代码；15年 React Native，16年 发布v15
React特点：
①声明式设计：采用声明式，轻松描述应用
②JSX：JavaScriptXml语法，是js的扩展
③组件：构建组件，提高复用率，降低测试难度，提高开发速度
④单向数据流
⑤高效、灵活
不支持IE8以下的浏览器。
二、环境搭建
reactjs.com -->https://facebook.github.io/react/
方式1：通过3个文件（react.js react-dom.js browser.js）
方式2：命令行
三、核心概念
1、jsx语法
render方法：是React的最基本的方法，用于将第一个参数所对应的标签 转换为html语言，插入到指定的DOM节点
jsx语法--》type='text/babel'
jsx语法：
如果遇到<,就会使用html解析
如果遇到{，就会使用js去解析
练习：
通过jsx语法 大家去测试
逻辑运算、3目运算、算术运算
2、组件
创建组件：var HelloMsg = React.createClass();
使用组件：<HelloMsg/>
注意事项：
①必须指定render方法
②组件名称首字母必须是大写的
③在组件中如果要返回多个元素，必须放在一个容器中。
JSX语法让React组件：支持自定义元素和组件，结合运算或者表达式添加数据，让组件变得更强大。
将多个组件 ，整合在一起，就可以构造更复杂的页面展示效果，一般称之为复合组件。
3、props（值的传递--》单向数据流）
指定属性
怎么读取属性所对应的值： {this.props.属性名称}
在线babel编译器：https://babeljs.io/repl
练习：使用props重构登录窗口
this.props.children 组件的所有子节点：没有子节点-》undefined 1个-》object 多个-》数组
React.Children
4、VirtualDOM （ref--》组件中找到真实的元素）
就是一种数据结构，各种各样的组件。
更新了数据，VDOM结合diff的算法。
通过组件获取真实的DOM节点，可以通过ref属性去实现。
指定ref ：<组件 ref='名称'>
通过读取ref对象的属性值拿到元素： this.refs.名称
练习：
input
input
button->求和
VDOM的工作方式：
1、创建的各个组件就是虚拟DOM，存在内存
2、需要更新视图时，React会通过diff的算法对比虚拟DOM和真实DOM
3、找到最优方案：更新DOM的成本最低的方法
4、更新
例子：props 传递属性
练习：创建组件AComponent （input），BComponent（button：获取值），MainComponent（AComponent、BComponent），指定按钮要去显示内容。
B组件按钮点击的时候 通过ref 去调用A组件input得到用户输入的值
①A组件用户输入的内容保存到Main组件中
main组件中定义一个方法，将方法传递给A组件，在onChange对应的处理函数调用main组件方法
②B组件按钮点击去获取Main组件中上一步保存的内容
main组件中定义一个方法，将方法传递给B组件，在onClick事件中调用main组件的方法
https://github.com/facebookincubator/create-react-app
一、state
state状态：只要更新state，就会根据state重新渲染用户界面，react来处理如何最高效的更新DOM。（类似ng中的方向1数据绑定）
how？
初始化状态： getInitialState 定义状态（返回一个对象）
设置状态： setState({}) 修改状态
读取状态： this.state.状态名称
练习：周六Main、A、B通信的案例，数据存储的result替换成状态来完成数据的读写。
二、React组件的生命周期
生命周期的3个阶段：
mount 插入到DOM
update 重新渲染
unmount 从DOM移除
3个阶段的处理函数：
componentWillMount() 准备插入
componentDidMount() 已经插入
componentWillUpdate(props，state) 准备更新
componentDidUpdate(props，state) 已经更新
componentWillUnmount（） 准备从DOM中移除
练习： state和生命周期的处理函数
在组件插入到真实DOM节点之后，启动定时器修改组件的透明度（0-1）
状态：透明度的值 opacityValue
组件：
style='opacity:{this.state.opacityValue}'--->
style={{opacity:this.state.opacityValue}}
三、事件
将React组件中的方法分为两大类：
①React自有的方法：生命周期、render。。
ComponentWill/DidMount/Update/Unmount/render/getInitialState
②用户自定义的方法，遵循驼峰式命名：handleChange handleClick （handle+eventName）
采用标准的事件对象。
基于事件，完成功能：
组件，div，鼠标的滚轮在div上滚动时，改变背景色(随机颜色)
①创建组件
②指定事件 onWheel handleWheel
③状态（初始化、设置、读取）
四、表单组件
表单元素有以下的属性设置都是受控组件：
value (input textarea)
checked (checkbox radio)
selected( option)
其余的都是非受控组件。
结合着onChange、value/checked一起来解决受控组件的问题。
五、toDoList
功能点：
①输入数据，在列表中增加一个待做事项
②点击delete按钮，从列表中删除一个事项
步骤1：将应用划分成组件 ToDoBox:ToDoInput + ToDoList(多个ToDoItem构成)
步骤2：创建组件，并先能模拟数据显示出来
步骤3: add
①初始化状态：数组
②添加向指定数组插入一条数据
③显示
步骤4:delete
就是从数组中删除一条数据。