核心:组件系统,all in js,自动更新dom,三个阶段,十一个钩子函数,更新状态,react中的事件,可控和不可控组件
1.React概述
- React是facebook于2013年6月推出一个一个库
- 其要解决的问题是构建数据不断变化的大型应用
- 特点是简单和声明式(自动dom操作)
- 核心是组件,使用组件提高了代码的复用率,降低测试的难度和代码的复杂度
- 发展历程2013.6发布,2013.9月上涨,2015.3月react native发布
2.React 开发环境
不需要特殊的开发环境,使用常见IDE并安装相应的插件即可,React兼容IE8及以上,其他主流的浏览器也兼容,兼容性较好。
3.JSX语法的介绍
简单来说就是all in js,将html,css全部写到js文件中,需要使用jsxTransfer.js进行代码的转换
4.组件生命周期
组件本质上是状态机,输入确定,输出一定确定
分为三个部分:初始化阶段——运行中阶段——销毁阶段5
初始化阶段的钩子函数:(5个钩子函数,按照顺序排列)
- getDefaultProps
- getInitialState
- componentWillMount
- render
- componentDidMount
运行中阶段:(5个钩子函数,按照顺序排列)
- componentWillReceiveProps
- shouldComponentUpdate
- componentWillUpdate
- render
- componentDidUpdate
销毁阶段:(1个钩子函数)
- componentWillUnmount
5.React属性和状态详解
- 状态的含义和用法
- 状态的用法
getInitalState:初始化每个实例
setState:更新组件状态(就是更新组件数据,十分重要的方法)
6.React中事件的用法
React中不同事件对象:
通用、剪切、键盘、焦点、鼠标、触摸、UI元素、滚动八种。这些都是对原生js的封装而已,原生js中有哪些?和这些的区别是什么?
7.React组件的协同使用
- 什么是组件的协同使用?
组件协同本质上是对组件的一种组织管理方式,目的是:
1)逻辑清晰
2)代码模块化
3)封装细节
4)代码可复用
- 组件协同的两种主要方式
1)嵌套:组件嵌套是由多个小组件共同拼凑成一个大的组件完成一个功能,主要体现了模块化和封装思想
2)mixin:组件混入,将多个小组件中共同的部分抽取出来,主要实现的是代码复用的思想
8.React表单详解
自定义表单组件的原因:
- 内因:表单本身具备特殊性,样式统一,信息内聚,行为固定
- 外因:本质上是组件嵌套,组织和管理组件的一种方式
两种组件:
- 可控组件
- 不可控组件
组件可控的好处:符合React的数据流,数据存储在state中,便于使用,便于对数据进行处理。