基本使用
直接渲染 html，相当于 vue 中的 v-html
直接渲染 html
React 事件
bind this
事件的使用
event
React event
总结：react 中的 事件的 event 不是原生的 Event，是 React 封装了的 SyntheticEvent，它模拟出 DOM 事件所有能力， event.nativeEvent 是原生事件对象；所有的事件 都被挂载到 document 上，和 DOM 事件不一样，和 Vue 事件也不一样。
父子通信
传递自定义参数
props 传递参数；
props 传递 函数；
（vue 中 是 @自定义函数 = XXX； 子组件 this.$emit 来触发父组件事件实现的）
props
props 类型检查
类型检查
setState
不可变值（重要）
不要直接修改 State
不可变值
数字类型， 不能 this.state.XX ++;
数组类型，不能直接对 this.state.arr 进行 push 、pop、splice 等，这个违背不可变值， 可以进行如 concat、 [...this.state.arr, newvalue]、slice 截取、 filter 筛选、另外做个副本等操作，不能改变老的对象的值。
对象类型， {...this.state.obj, newKey: value}， Object.assign({}, this.state.obj)，不能直接对 this.state.obj 进行属性设置，这样违反不可变值。
state的更新可能是异步更新
setState 直接使用 是异步的；
setTimeout 中的 setState 是同步的，自定义的DOM 事件， setState是同步的（比如document.body.addEventListener('click', () =>{ this.setState()})）
state的更新可能是异步更新
state 的更新可能会被合并
出于性能考虑，React 可能会把多个 setState() 调用合并成一个调用；多次 setState 会被合并 ，执行结果只一次。
传入函数 ，不会被合并。
state 的更新可能会被合并
组件生命周期
单个组件生命周期
生命周期
父子组件生命周期 和 Vue 一样
高级特性
函数组件
组件的两种形式 class 和 function Component
函数组件：纯函数 输入 props 输出 JSX; 没有实例， 没有生命周期，没有 state; 不能扩展其他的方法（hooks 另外介绍）
组件的两种形式
非受控组件
非受控组件的 ref 的 三种创建方式（其中一种被淘汰）：
1. React.createRef() ； 2. 回调 Refs ； 3. string ref （淘汰）。
defaultValue / defaultChecked：非受控组件 使用这两个作为初始值
1. React.createRef()
2. 回调 Refs
函数组件使用 ref
React.forwardRef
手动操作 DOM 元素
使用场景 ：必须收到操作 DOM 元素， setState 实现不了； 文件上传<input type='file'>; 某些富文本编辑器，需要传入 DOM 元素；管理焦点，文本选择或媒体播放；触发强制动画；集成第三方 DOM 库。
注意 ：优先使用受控组件，符合 React 设计原则； 必须操作 DOM 时， 再使用 非受控组件。
Portals
如何让组件渲染到父组件以外？Portal 提供了一种将子节点渲染到存在于父组件以外的 DOM 节点的优秀的方案。
Portals
ReactDOM.createPortal(child,container)
第一个参数（child）是 React 元素，例如一个元素，字符串或 fragment。第二个参数（container）是一个 DOM 元素，把这个组件渲染到哪个 节点上，比如 document.body。
使用场景： 比如 modal 是全局弹窗， fixed需要放在 body 第一层级； overflow:hidden，父组件是 BFC，会限制子组件在超出部分隐藏，可以让子组件脱离父组件，在外面现实； 父组件 z-index 值太小， 让它脱离 父组件。
总结：一个 portal 的典型用例是当父组件有 overflow: hidden 或 z-index 样式时，但你需要子组件能够在视觉上“跳出”其容器。例如，对话框、悬浮卡以及提示框。
context
React.createContext()
Context 提供了一个无需为每层组件手动添加 props，就能在组件树间进行数据传递的方法。
在一个典型的 React 应用中，数据是通过 props 属性自上而下（由父及子）进行传递的，但这种做法对于某些类型的属性而言是极其繁琐的（例如：地区偏好，UI 主题），这些属性是应用程序中许多组件都需要的。Context 提供了一种在组件之间共享此类值的方式，而不必显式地通过组件树的逐层传递 props。
应用场景：公共信息（语言、主题）如何传递给每个组件； 用 props 太繁琐； 用 redux 小题大作。
context
函数组件 和 class 组件 消费方式 是不一样的
函数组件使用 context
多个 context 的使用 ，但是还不是不推荐这么嵌套， 可以重新设计组件的层级。
多个 context
异步组件
import（）
React.lazy
React.lazy() 允许你定义一个动态加载的组件。这有助于缩减 bundle 的体积，并延迟加载在初次渲染时未用到的组件。
React.Suspense
应在 Suspense 组件中渲染 lazy 组件，如此使得我们可以使用在等待加载 lazy 组件时做优雅降级（如 loading 指示器等）。fallback 属性接受任何在组件加载过程中你想展示的 React 元素。你可以将 Suspense 组件置于懒加载组件之上的任何位置。你甚至可以用一个 Suspense 组件包裹多个懒加载组件。
异步组件
性能优化
shouldComponentUpdate (简称 SCU)
基本用法
SCU
为什么 react 可以定制这个生命周期 而不去硬规定 ?
React 默认 ：SCU 默认返回true ，即父组件更新，子组件会无条件的更新。
SCU 一定每次都要用吗？ ------ 可以先不用SCU，需要性能优化的时候才优化并且使用 SCU； SCU 要配合不可变值使用。
PureComponent 和 React.memo
PureComponent， SCU 中 实现了浅比较（深度比较消耗性能）
只进行浅比较
memo 函数组件中的 PureComponent
浅比较已经适用大部分情况（尽量不要做深度比较）
注意：如果 props 相等，areEqual 会返回 true；如果 props 不相等，则返回 false。这与 shouldComponentUpdate 方法的返回值相反。
memo
高阶组件 HOC
高阶组件（HOC）是 React 中用于复用组件逻辑的一种高级技巧。HOC 自身不是 React API 的一部分，它是一种基于 React 的组合特性而形成的设计模式。
高阶组件是参数为组件，返回值为新组件的函数.
具体内容 可以看React 高阶组件
HOC
Render Props
是指一种在 React 组件之间使用一个 值为函数的 prop 共享代码的简单技术。
render prop 是因为模式才被称为 render prop ，你不一定要用名为 render 的 prop 来使用这种模式
Render Props
HOC 和 Render Props
HOC 模式简单，但会增加组件层级；Render Props 代码比较简洁；它们都是抽离公共逻辑提升代码质量的方法，按需使用。
网友评论