React.js

一、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组件中上一步保存的内容

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
就是从数组中删除一条数据。