React - Hooks

函数式组件使用hook，就可以跟class组件一样拥有state、生命周期

import React, { useState, useEffect } from 'react'

function Home() {
  let [ count, setCount ] = useState(0)
   
  useEffect(() => {
    console.log('初次挂载 or 更新时触发')
    return () => {
      console.log('更新之前 or 卸载之前触发')
    }
  })
  return (
    <p onClick={() => { setCount(count + 1)}}>{count}</p>
  )
}

1.useState

useState()传入的参数用于设置初始值，返回值为一维数组，元素为变量 & 修改变量的方法，通过ES6解构获取，变量名 & 方法名都可自定义

let [ abc, editABC ] = useState(0)

初始值常用类型：数值、字符串、数组、对象。修改数组或对象时，需要创建一个新的数组或对象（新的指向），并在此基础上修改并传入修改方法，直接修改原始数组或对象将不起作用

// 点击之后视图上并不会出现1，2，3，4
function Home() {
  let [ list, setList ] = useState([1, 2, 3])

  return (
    <p onClick={() => { setList(list.concat(4)) }}>{list}</p>
  )
}

// 需要在 setList() 中传入一个新的数组，与原始的 list 不是同一指引
function Home() {
  let [ list, setList ] = useState([1, 2, 3])
  
  return (
    <p onClick={() => {
      let _list = JSON.parse(JSON.stringify(list))
      setList(_list.concat(4))
    }}>
      {list}
    </p>
  )
}

// 点击之后视图并不会更新为'Jerry'
function Home() {
  let [ user, setUser ] = useState({name: 'Tom', age: 24})

  return (
    <p onClick={() => {
        user.name = 'Jerry'
        user.name = 25
        setUser(user)
      }}
    >
      name: {user.name}
    </p>
  )
}

// 深拷贝一个对象
function Home() {
  let [ user, setUser ] = useState({name: 'Tom', age: 24})

  return (
    <p onClick={() => {
        let _user = JSON.parse(JSON.stringify(user))
        _user.name = 'Jerry'
        _user.age = 25
        setUser(_user)
      }}
    >
      name: {user.name}, age: {user.age}
    </p>
  )
}


// 或者使用 Object.assgin() 合成新对象，出现冲突的属性值，后面的会覆盖前面的
function Home() {
  let [ user, setUser ] = useState({name: 'Tom', age: 24})

  return (
    <p onClick={() => {
        let _user = Object.assign({}, user, {
          name: 'Jerry',
          age: 25
        })
        setUser(user)
      }}
    >
      name: {user.name}
    </p>
  )
}

2.useEffect

useEffect() 可以写多次，而class组件中的生命周期函数只能写一次

function Home() {
  let [ user, setUser ] = useState({name: 'cjn', age: 24})
  useEffect(() => {
    console.log('挂载 & 更新 1')

    return () => {
      console.log('更新前 or 卸载前 1')
    }
  })
  useEffect(() => {
    console.log('挂载 & 更新 2')
    
    return () => {
      console.log('更新前 or 卸载前 2')
    }
  })
  return (
    <p>
      name: {user.name}, age: {user.age}
    </p>
  )
}

3.useContext

组件之间共享变量（跨组件通信）

// useContext.js
import React from 'react'
export const AppContext = React.createContext({}); // 传递默认值

在上层组件通过 Provider 向下传递数据

// App.js
import React, { Component } from 'react'
import Home from './Home'
import { AppContext } from './useContext'

class App extends Component {
  state = { count: 1 }
  render() {
    let { count } = this.state
    return (
      <AppContext.Provider value={count}> // 传递
        <Home />
      </AppContext.Provider>
    )
  }
}

export default App

在子组件中接收

import React, { useContext } from 'react'
import { AppContext } from './useContext'

function Home(props) {
  const count = useContext(AppContext) // 接收
  return (
    <div>Home {count}</div>
  )
}

export default Home