7. React 使用

1.基本使用-常用，必须会
2.高级特性-不常用，但体现深度
3.Redux和React-router使用

1. 变量、表达式
2. class style
3. 子元素和组件

1. if else
2. 三元表达式
3. 逻辑运算符 && ||

1. map
2. key

1. bind this
2. 关于event参数
3. 传递自定义参数

clickHandler1

clickHandler2

1. 受控组件
2. input textarea select 用value
3. checkbox radio 用checked

input

<textarea value={this.state.info} onChange={this.onTextareaChange}/>

 <select value={this.state.city} onChange={this.onSelectChange}>
    <option value="beijing">北京</option>
    <option value="shanghai">上海</option>
    <option value="shenzhen">深圳</option>
</select>

<input type="checkbox" checked={this.state.flag} onChange={this.onCheckboxChange}/>

<input type="radio" name="gender" value="male" checked={this.state.gender === 'male'} onChange={this.onRadioChange}/>

1. props传递数据
2. props传递函数
3. props类型检查

1. 父组件可以给子组件传递数据，也可以传递方法
2. 在子组件中，通过this.props获取父组件传递的数据
3. 状态提升：react组件中，在公共的父组件中定义变量

1. 不可变值（非常非常重要）
2. 可能是异步更新
3. 可能会被合并

代码演示

不可变值

1. JSX基本使用
2. 条件
3. 列表
4. 事件
5. 表单
6. 组件和props
7. setState(面试必考)
8. 生命周期

1. 函数组件
2. 非受控组件
3. Portals
4. context
5. 异步组件
6. 性能优化
7. 高阶组件 HOC
8. Render Props

1. 纯函数，输入props，输JSX
2. 没有实例，没有生命周期，没有state
3. 不能扩展其他方法

1. ref
2. defaultValue defaultChecked
3. 手动操作DOM元素

使用场景

代码演示

1. 优先使用受控组件，符合React设计原则
2. 必须操作DOM时，再使用非受控组件

1. overflow:hidden
2. 父组件z-index值太小
3. fixed需要放在body第一层

使用场景：
1. 公共信息（语言、主题）如何传递给每个组件
2. 用props太繁琐（比如组件层级很深时，用props需要一层一层的传递，太麻烦）
3. 用redux小题大做

代码演示

1. import()
2. React.lazy
3. React.Suspense

组件比较大时，或者路由懒加载时使用异步组件

代码演示

1. 性能优化，永远是面试的重点
2. 性能优化对React更加重要
3. 回顾setState的不可变值

1. shouldComponentUpdate(简称SCU)
2. PureComponent和React.memo
3. 不可变值immutable.js

SCU基本用法

PropsDemo.js

SCUDemo2

1. SCU默认返回true，即React默认重新渲染所有子组件
2. 必须配合'不可变值'一起使用
3. 可先不用SCU，有性能优化时再考虑使用

1. PureComponent，SCU中实现了浅比较
2. memo，函数组件中的PureComponent
3. 浅比较已适用大部分情况（尽量不要做深度比较）

areEqual是一个类似SCU的函数，把组件和类SCU函数传入React.memo中

1. 彻底拥抱‘不可变值’
2. 基于共享数据（不是深拷贝），速度好
3. 有一定学习和迁移成本，按需使用

1. 面试重点，且涉及React设计理念（不可变值）
2. SCU  PureComponent React.memo immutable.js
3. 按需使用 & state层级

1. mixin，已被React弃用
2. 高阶组件 HOC(High Order Component)
3. Render Props

代码演示

代码演示

1. HOC: 模式简单，但会增加组件层级，可能会出props漏传的情况
2. Render Props：代码简洁，学习成本较高
3. 按需使用

1. 和Vuex作用相同，但比Vuex学习成本高
2. 不可变值，纯函数
3. 面试常考

1. 基本概念
2. 单项数据流（经常考）
3. react-redux
4. 异步action(常考)
5. 中间件

1. store state
2. action
3. reducer

https://www.redux.org.cn/

1. dispatch(action)
2. reducer->newState，用不可变值
3. subscribe触发通知，触发视图层更新

1. <Provider> connect
2. connect
3. mapStateToProps mapDispatchToProps

代码演示