课程目标
- 掌握React其他 API 使用：PureComponent、ref、children、dangerouslySetInnerHTML、key
- 掌握函数式组件及常见 hooks 的使用
- 可以独立开发基于Hooks 或 Component 的 todoList 应用
课程内容
PureComponent
PureComponent 提供了一个具有浅比较的 shouldComponentUpdate 方法,其他和 Component 完全一直
ref
- 旧版 - string ref
- 主流 - createRef()
- 注意：在 组件挂载完成之后及更新之后使用
children
- 组件标签对之间的内容会被当做一个特殊的属性 props.children 传入组件内容
- 可以自定义结构的组件的常用形式
- children
- 传递函数
- 传递子组件
dangerouslySetInnerHTML
直接设置标签的 innerHTML
key 的问题
在 React ，组件每次更新时，会生成一个 虚拟DOM，和原有的虚拟DOM进行对比。
如果是批量生成的一组元素，那React就会根据 key 值去做对比
一个列表中的每一项 key 是唯一的
如果列表中发生顺序等操作变化，key 一定要用数据的id
实战 - 完整todoList
函数式组件
函数式组件中，没有 state 和 生命周期，所以又被称为 无状态组件，在早期 react 版本中，被当前纯渲染组件来用
React hooks
React hooks 是React 16.8中的新增功能。它们使您无需编写类即可使用状态和其他React功能
参考：https://reactjs.org/docs/hooks-intro.html
React Hooks 优势
- 简化组件逻辑
- 复用状态逻辑
- 无需使用类组件编写
常用 hook
- useState
const [state, setState] = useState(initialState); - useEffect
类组件
componentDidMount、componentDidUpdate 和 componentWillUnmount
需要清除的副作用 - useRef
Hook 使用规则
- 只在最顶层使用 Hook
- 只在 React 函数中调用 Hook
- React 函数组件中
- React Hook 中 - 我自己定义 hook 时，可以调用别的hook
- 所有的 hook 必须 以 use
