React 17 基础1

简介

设计理念
单向数据流、虚拟 DOM、组件化
组件化编程的思想
React 以组件的方式去重新思考用户界面的构成，将用户界面上每一个功能相对独立的模块定义成组件，然后将小组件通过组合或嵌套的方式构成大组件，最终完成整体 UI 的构建。

项目启动

npx create-react-app react-project --template typescript

CSS 模组

直接引入整个css文件

import './index.css'
使用：<div className="app" />

JSS 模块化引入组件

npm install typescript-plugin-css-modules --save-dev
import styles from './index.module.css'
使用：<div className={styles .app} />

state 和 props 的区别

state 是组件对内的接口，props 是组件对外的接口
state 用于组件内部的数据传递，props 用于数组间数据传递
state：
- state 是私有的，可以认为 state 是组件的“私有属性”，用 setState() 来修改。若直接修改 state，组件不会触发 render 函数，页面不会渲染。
- 构建函数 constructor 是唯一可以初始化 state 的地方。调用 setState 后，state 不会立刻更新，是异步操作；不要依赖当前的 state 来计算下一个 state。
props(Properties 的缩写)：
- 本质上说，props 是传入函数的参数，是传入组件内部的数据，是从父组件传递到子组件的数据。
- props 是只读属性

React Event 事件处理机制

如 onClick 等
为了少输入代码，同时为了避免 this 造成的困扰，我们在这里使用箭头函数来进行事件处理。

handleClick = () => {
    this.setState({
      count: this.state.count + 1
    }, () => {
      // 数据同步
      console.log('count', this.state.count)
    })
    // 数据不同步
    console.log('click', this.state.count)
    // 说明 setState 是异步更新，同步执行的
}

render() {
    const { count } = this.state

    return (
      <div>
        <button onClick={this.handleClick}>{count}</button>
      </div>
    )
  }

生命周期

生命周期可分为三个阶段：

图片

Mounting：初始化阶段，创建虚拟 DOM，渲染 UI
constructor：初始化组件 state
componentDidMount：在组件创建好 dom 元素以后，挂载进页面时调用，一般用来获取网络数据

Updating：更新阶段，更新虚拟 DOM，重新渲染 UI
componentWillReceiveProps：在组件接收到一个新的 prop（更新后）时被调用，但是会产生副作用，已被废弃，可使用 getDerivedStateFromProps 来进行替代。

/*
 * getDerivedStateFromProps：将传入的props映射到state上面。这个函数会在每次 re-rendering 之前被调用，这意味着即使你的 props 没有任何变化，而是父 state 发生了变化，导致子组件发生了 re-render ，这个生命周期函数依然会被调用。
 * getDerivedStateFromProps 是一个静态函数，也就是这个函数不能通过 this 访问到 class 的属性，也并不推荐直接访问属性。而是应该通过参数提供的 nextProps 以及 prevState 来进行判断，根据新传入的 props 来映射到 state。
 * 如果 props 传入的内容不需要影响到你的 state，那么就需要返回一个 null，这个返回值是必须的。
 */
static getDerivedStateFromProps(nextProps, prevState) {
  const {type} = nextProps;
  // 当传入的type发生变化的时候，更新state
  if (type !== prevState.type) {
    return { type }
  }
  // 否则，对于state不进行任何操作
  return null
}

shouldComponentUpdate：使用 shouldComponentUpdate() 以让 React 知道当前状态或属性的改变是否不影响组件的输出，默认返回 ture ，返回 false 时不会重写 render，该方法并不会在初始化渲染或当使用 forceUpdate() 时被调用

shouldComponentUpdate(nextProps, nextState) {
  return true
}

componentDidUpdate：组件更新后调用

Unmounting：删除虚拟 DOM，移除 UI
componentWillUnmount：组件将要销毁时调用，可用来回收内存、移除监听或清空定时器等

获取网络 API 数据

对 any 的理解：

资源来源于网络请求，返回的数据类型不受控制
前端强行定义 API 数据类型，违法前后端分离的原则
不能为了使用 Type 而放弃 JavaScript 的灵活性

componentDidMount() {
  fetch('https://jsonplaceholder.typicode.com/users')
      .then(res => res.json())
      .then(data => {
        this.setState({
          robotGallery: data
        })
      })
}

React 17 新版本

虽然没有新功能，但具有战略意义
替换了底层的代码，向下兼容，同时甩掉了历史包袱
没有代码断层，给未来留下了足够的升级空间
逐步升级方案：允许多个 react 版本共存，如先升级路由系统、再升级弹窗，平滑过渡到最新版本
breaking changes：
事件委托机制改变
向原生浏览器靠拢
删除事件池
useEffect 清理操作改为异步操作
JSX 不可返回 undefined
删除部分私有 API
展望：v17 不是过渡版本，而是承上启下的战略版本，未来将会更加强调函数事组件，支持微前端等

钩子 hooks 简介

消息处理的一种方法，用来监视指定程序
函数组件中需要处理副作用，可以用钩子把外部代码“钩”进来
hooks 一律使用 use 前缀命名：useXxx
常用钩子：useState、useEffect、useContext、useReducer、useLayoutEffect、useDebugValue
hooks 的本质：一类特殊的函数，为你的函数式组件（functional Component）注入特殊的功能
hooks 的目的是为了给函数式组件加上状态

钩子 hooks 的使用

useState：

// useState 的参数为 count 的初始值，setCount 用于 count 的更新
const [ count, setCount ] = useState<number>(0)
const [ robotGallery, setRobotGallery ] = useState<any[]>([])

<button onClick={() => setCount(count + 1)}>count：{count}</button>

useEffect、loading、请求异常

const [ loading, setLoading ] = useState<boolean>(false)
const [ errMsg, setErrMsg ] = useState<string>('')
/*
* 一个组件内可以有多个useEffect
* 若第二个参数不传，则在每次页面渲染UI后调用
* 若第二个参数为空数组，则等同于 componentDidMount
* 若第二个参数为非空数组，数组内参数变化后调用
*/
useEffect(() => {
  console.log(count)
}, [count])

useEffect(() => {
  const getRobots = async () => {
    setLoading(true)
    setErrMsg('')
    try {
      const res = await fetch('https://jsonplaceholder.typicode.com/users')
      if (res.status === 200) {
        const data = await res.json()
        setRobotGallery(data)
      } else {
        setErrMsg(res.status + '')
      }
    } catch (error) {
      setErrMsg(error)
    }
    setLoading(false)
  }

  getRobots()
}, [])

{ errMsg && errMsg.trim() && <h4>{errMsg.trim()}</h4>}
{
   loading
   ?
   <h3>正在加载</h3>
   :
   <div className={styles['robot-layer']}>
     {
       robotGallery.map(item => <Robot key={item.id} id={item.id} name={item.name} phone={item.phone} email={item.email} />)
     }
   </div>
}

父组件向子组件传递数据（3种）
第一种：props

// index.tsx
<App usename="张三" />

// App.tsx
<h2>{props.usename}</h2>

第二种：appContext.Consumer

// index.tsx
const defauleContextValue = { gender: '男' }
export const appContext = React.createContext(defauleContextValue)

// 孙子组件：Robot.tsx
import { appContext } from '../index'

const Robot: React.FC<RobotProps> = ({ id, name, phone, email }) => {
  return (
    <appContext.Consumer>
      {
         value => {
            return (
              <div className={styles['robot-box']}>
                <img src={`https://robohash.org/${id}`} alt="robot"/>
                <p>name：{name}</p>
                <p>phone：{phone}</p>
                <p>email：{email}</p>
                <p>gender：{value.gender}</p>
              </div>
            )
         }
      }
    </appContext.Consumer>
  )
}

第三种：useContext

// 孙子组件：Robot.tsx
import { appContext } from '../index'

const Robot: React.FC<RobotProps> = ({ id, name, phone, email }) => {
    const value = useContext(appContext)
    return (
        <div className={styles['robot-box']}>
            <img src={`https://robohash.org/${id}`} alt="robot"/>
            <p>name：{name}</p>
            <p>phone：{phone}</p>
            <p>email：{email}</p>
            <p>gender：{value.gender}</p>
        </div>
    )
}

组件化 context provider
创建 AppState.tsx 文件

import React, { useState } from 'react';

interface AppStateValue {
    gender: string
    ShoppingCart: {
        items: { id: number, name: string, count: number }[]
    }
}

const defauleContextValue: AppStateValue = {
    gender: '男',
    ShoppingCart: {
        items: []
    }
}

export const appContext = React.createContext(defauleContextValue)

export const appSetStateContext = React.createContext<
    React.Dispatch<React.SetStateAction<AppStateValue>> | undefined
>(undefined)

export const AppStateProvider: React.FC = props => {
    const [ state, setState ] = useState(defauleContextValue)

    return (
        <appContext.Provider value={state}>
            <appSetStateContext.Provider value={setState}>
                {props.children}
            </appSetStateContext.Provider>
        </appContext.Provider>
    )
}

index.tsx

import { AppStateProvider } from './AppState'
ReactDOM.render(
  <React.StrictMode>
    <AppStateProvider>
      <App />
    </AppStateProvider>
  </React.StrictMode>,
  document.getElementById('root')
);

子组件，变更全局状态

import { appContext, appSetStateContext } from '../AppState'

const value = useContext(appContext)
const setState = useContext(appSetStateContext)

const addToCart = () => {
    if (setState) {
        setState(state => {
            const items = JSON.parse(JSON.stringify(state.ShoppingCart.items))
            const itemIndex = items.findIndex(obj => obj.id === id)
            if (itemIndex !== -1) {
                items[itemIndex].count++
                return {
                    ...state,
                    ShoppingCart: {
                        items: [...items]
                    }
                }
            }
            return {
                ...state,
                ShoppingCart: {
                    items: [...items, { id, name, count: 1 }]
                }
            }
        })
    }
}

<button onClick={addToCart}>加入购物车</button>

高阶组件（HOC：高阶组件并不是组件，而是接受组件作为参数，并且返回组件的函数）：withAddToCart
AddToCart.tsx

import React, { useContext } from 'react'
import { appSetStateContext } from '../AppState'
import { RobotProps } from './Robot'

export const withAddToCart = (ChildComponent: React.ComponentType<RobotProps>) => {
    return props => {
        const setState = useContext(appSetStateContext)
        const addToCart = (id, name) => {
              if (setState) {
                setState(state => {
                    const items = JSON.parse(JSON.stringify(state.ShoppingCart.items))
                    const itemIndex = items.findIndex(obj => obj.id === id)
                    if (itemIndex !== -1) {
                        items[itemIndex].count++
                        return {
                            ...state,
                            ShoppingCart: {
                                items: [...items]
                            }
                        }
                    }
                    return {
                        ...state,
                        ShoppingCart: {
                            items: [...items, { id, name, count: 1 }]
                        }
                    }
                })
            }
        }

        return <ChildComponent {...props} addToCart={addToCart} />
    }
}

robot.tsx

import React, { useContext } from 'react'
import { appContext } from '../AppState'
import { withAddToCart } from './AddToCart'

export interface RobotProps {
    id: number
    name: string
    email: string
    phone: string
    addToCart: (id, name) => void
}

const Robot: React.FC<RobotProps> = ({ id, name, phone, email, addToCart }) => {
    const value = useContext(appContext)

    return (
        <div>
            <img src={`https://robohash.org/${id}`} alt="robot"/>
            <p>name：{name}</p>
            <p>phone：{phone}</p>
            <p>email：{email}</p>
            <p>gender：{value.gender}</p>
            <p><button onClick={() => addToCart(id, name)}>加入购物车</button></p>
        </div>
    )
}

export default withAddToCart(Robot)

自定义 hooks：useAddToCart

export const useAddToCart = () => {
const setState = useContext(appSetStateContext)

const addToCart = (id, name) => {
    if (setState) {
        setState(state => {
            const items = JSON.parse(JSON.stringify(state.ShoppingCart.items))
            const itemIndex = items.findIndex(obj => obj.id === id)
            if (itemIndex !== -1) {
                items[itemIndex].count++
                return {
                    ...state,
                    ShoppingCart: {
                        items: [...items]
                    }
                }
            }
            return {
                ...state,
                ShoppingCart: {
                    items: [...items, { id, name, count: 1 }]
                }
            }
        })
      }
    }

    return addToCart
}