1.什么是react?
1.1.React是一个用于构建用户界面的javacript库
1.2.React主要用于构建UI,很多人认为 React 是 MVC 中的 V(视图)
1.3.React是拥有较高的性能,代码逻辑非常简单
2.react特性?
2.1.声明式设计
2.2.高效 React通过对DOM的模拟,最大限度地减少与DOM的交互
2.3.灵活 React可以与已知的库或框架很好地配合
2.4.JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ,但我们建议使用它。
2.5.组件 通过 React 构建组件,使得代码更加容易得到复用,能够很好的应用在大项目的开发中
2.6.单向响应的数据库流
3.react生命周期 (三种)
初始化 更新 销毁
react的state、props、Context区别、作用、使用场景
一.state
区别:
作用:react state(内部状态或者说局部状态) 通过与用户的交互,实现不同状态,然后渲染 UI,让用户界面和数据保持一致。
React中,更新组件的state,会导致重新渲染用户界面(不要操作DOM).简单来说,就是用户界面会随着state变化而变化.
使用场景:
3.2.state主要的方法有
初始化内部状态 this.state={}一般是在构造函数constructor
中设置值(默认方法)
更新内部状态 this.setstate({xx.sss})用于给赋值
获取内部状态 this.state.xx 用于取值
二.props
了解:React中的数据流是单向的,只会从父组件传递到子组件。属性props
(properties)是父子组件间进行状态传递的接口,React会向下遍历整个组件树,并重新渲染使用这个属性的组件
2.props的作用
组件中的props是一种父级向子级传递数据的方式.然后返回视图
3.使用场景
验证props
属性
javascript
的基本数据类型包括:数组,布尔,函数,数字,字符,对象
React.PropTypes.array
React.PropTypes.boolean
React.PropTypes.func
React.PropTypes.number
React.PropTypes.string
React.PropTypes.object
三.Context
如果只传递一些功能模块数据,则尽量不要使用context,使用props传递数据会更加清晰;
使用context会使组件的复用性降低,因为这些组件依赖‘上下文‘,当你在别的地方渲染的时候,可能会出现差异
2.Context的作用
组件跨级传递数据
3、使用场景
React的context和全局变量相似,应避免使用,场景包括:传递登录信息、当前语音以及主题信息;
总结
1、state称为内部状态或者局部状态,内部状态的操作配合React事件系统,可以实现用户交互的功能
2、Props与context则用于在组件间传递数据。使用props传递数据简单清晰,但是跨级传递非常麻烦。使用
context可以跨级传递数据,但是会降低组件的复用性,因为这些组件依赖“上下文”,。所有尽量只使用context传递登录状态、颜色主题等全局数据。
第三部分:es6新特性
es6在设计的时候保证了与现有代码的最大兼容性
1. let、const 和块级作用域
1.1.默认情况下javascript中并没有块级(block)作用域:
2. 箭头函数(箭头函数就是函数的一种简写形式,使用括号包裹参数,跟随一个 =>,紧接着是函数体)
3.函数的默认值
4.Spread/rest操作符
5. 对象语法扩展
6.二进制和八进制的字面量
7.对象和数组的解构
8.对象的超类
9.模板语法,分隔符
10.for...of(迭代器 Iterators)
11.Map和WeakMap (ES6 中两种新的数据结构集:Map 和 WeakMap。事实上每个对象都可以看作是一个 Map)
12.Set和WeakMap(Set 对象是一组不重复的值,重复的值将被忽略,值类型可以是原始类型和引用类型)
13.类(ES6 中有 class 语法。值得注意是,这里的 class 不是新的对象继承模型,它只是原型链的语法糖表现形式)
14.Symbol(Symbol 是一种新的数据类型,它的值是唯一的,不可变的。ES6 中提出 symbol 的目的是为了生成一个唯一的标识符,不过你访问不到这个标识符)
15.Generators(它允许一个函数返回的可遍历对象生成多个值)生成器
16.Promises(是一个异步编程的库,存在于很多其他的JS库中)
17.模块化 (ES6模块化特点)
1、每一个模块只加载一次, 每一个JS只执行一次, 如果下次再去加载同目录下同文件,直接从内存中读取。 一个模块就是一个单例,或者说就是一个对象;
2、每一个模块内声明的变量都是局部变量, 不会污染全局作用域;
3、模块内部的变量或者函数可以通过export导出;
4、一个模块可以导入别的模块
有几个点需要注意:
- let 关键词声明的变量不具备变量提升(hoisting)特性
- let 和 const 声明只在最靠近的一个块中(花括号内)有效
- 当使用常量 const 声明时,请使用大写变量,如:CAPITAL_CASING
- const 在声明时必须被赋值
第四部分 jsx作用
第五部分 redux(store、reducer、action)关联
1.store 在这里代表的是数据模型,内部维护了一个state变量
有四个方法:
dispatch
subscribe(监听state的变化)
getState
replaceReducer(替换reducer,改变state修改的逻辑)
最重要的二个核心方法:
dispatch 来获取store的状态(state)
getSate 后者用来修改store的状态
2.action 对行为(如用户行为)的抽象,在redux里是一个普通的js对象。redux对action的约定比较弱,除了一点,action必须有一个type
字段来标识这个行为的类型。所以,下面的都是合法的action 对象发送出去
3.reducer是一个函数,它接受一个state和一个action,根据action的type返回一个新的state。根据业务逻辑可以分为很多个reducer,然后通过combineReducers将它们合并,state树中有很多对象,每个state对象对应一个reducer,state对象的名字可以在合并时定义