组件化

// React.FC 代表React Function Component的接口

推荐书籍：JavaScript 王者归来

css in js (jss)

css in js 代码提示插件

  1. npm install typescript-plugin-css-plugin --save-dev

hooks

给函数组件加上状态

hooks函数

消息处理的一种方法，用来监视指定程序

无状态组件与HOC（高阶组件）

常见的钩子函数

useState

1、调用

2、eslint插件

3、延迟初始化
image.png

useEffect

副作用钩子
image.png

  • 1、模拟生命周期函数

    1. useEffect(() => {
    2. // 模拟生命周期函数
    3. }, []);

  • 2、模拟componentDidUpdate

    1. useEffect(() => {
    2. // 模拟componentDidUpdate，数据有更新就会调用
    3. });

  • 3、监听值的改变

    1. useEffect(() => {
    2. document.title = `点击了${count}次`
    3. }, [count]);

  • async和await使用

    1. useEffect(() => {
    2. const fetchData = async () => {
    3.   await fetch('https://forguo.cn');
    4. }
    5. }, []);

    useContent

    跨组件数据传递，可用于全局状态管理

其他hooks

image.png

高阶组件

image.png

命名规范
image.png

自定义hook

image.png

路由

image.png

异步导入

lazy

memo

shouldComponentUpdate
占用性能问题