淘先锋技术网

首页 1 2 3 4 5 6 7
一、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
就是从数组中删除一条数据。