React学习第六天——React Hook学习

React Hook

1.啥是Hook？

能在函数中就实现 React的特性，例如setState、修改数据，操作dom

2.State Hook

引入useState后，即可通过以下代码实现对数据的控制

const [state, setstate] = useState(0)

在这个代码中，右边的useState()表示现在需要给他赋一个默认值（我设置为0），左边的State表示的是当前的值（也就是括号中的0）。可以通过setstate修改当前的state值

接下来的这个代码，就是通过在函数中调用useState实现count的功能

import React, { useState } from 'react'
function TestUseState() {
  //useState创造一个状态，并赋值一个初始值
  //第一个变量指向的是当前状态的值 约等于this.state
  //第二个是一个函数，可以修改状态的值，约等于this.setState
  const [state, setstate] = useState(0)
  let add = () => {
    let newCount = state
    setstate((newCount += 1))
  }
  return (
    <div>
      <div> {state} </div> <button onClick={add}> 点击有惊喜 </button>
    </div>
  )
}

3.Context Hook

可以返回得到对象的值

import React, { useContext } from 'react'
//先往最下面App中看
const Test = {
  name: 'Gelx',
  msg: '发福吴亦凡',
}
//useContext共享状态钩子
//设置该属性采用useContext
const TestUseContext = React.createContext()
//建立新的组件
let ATest = () => {
//同时从TestUseContext中获取name、msg值并渲染
  const { name, msg } = useContext(TestUseContext)
  return (
    <div>
      <div> 名称： {name} </div>
      <div> 信息： {msg} </div>
    </div>
  )
}
function App() {
  return (
    <div>
    //此时定义了一个属性并给他传递一个Provider的value值，这个值取于Test中
      {/* <TestUseContext.Provider value={Test}>
      //再建立一个组件用于渲染数据
        <ATest> </ATest>
      </TestUseContext.Provider> */}
    </div>
  )
}
export default App

4.Effect Hook

Effect Hook更像是生命周期中的componentDidMount，componentDidUpdate 和 componentWillUnmount

• 简单的实现

import React, { useEffect } from 'react'

function TestUseEffect() {
  const [loading, setLoading] = useState(true)
  //类似于生命周期componentDidmount
  useEffect(() => {
    setTimeout(() => {
      setLoading(false)
    }, 1000)
  })
  return loading ? <div>Loading……</div> : <div>加载完毕</div>
}

通过这个简单的实现可以看到Effect Hook可以很好的帮助我们操作更新dom元素

• 稍微复杂一些的实现
  这时候我们加上复杂一些的实现方法，如果函数中有第二个参数的时候，Effect可以根据第二个参数的变动，实现相应的结果渲染。若在Effect中执行return，则会执行卸载清除组件的操作

import React, { useEffect } from 'react'
//在这个函数中我们不仅设置显示、更改名字，还设置这个组件是否被卸载两个属性
function TestDoubleUseEffect() {
  const [name, setName] = useState('Gelx')
  const [show, setshow] = useState(true)
  const changName = (name) => {
    setName(name)
  }
  return (
    <div>
      {show ? <AsyncPage name={name}></AsyncPage> : <div>组件已被卸载</div>}
      <button onClick={() => changName('小龚')}>将名字改为小龚</button>
      <button onClick={() => setshow(false)}>卸载组件</button>
      <button onClick={() => setshow(true)}>安装组件</button>
    </div>
  )
}
function AsyncPage({ name }) {
  const [loading, setLoading] = useState(true)
  const [person, setperson] = useState('GX')
  useEffect(() => {
    setLoading(true)
    setTimeout(() => {
      setLoading(false)
      setperson(name)
    }, 1000)
    return () => {}
  }, [name])

  return loading ? <div>Loading……</div> : <div>{person}</div>
}
function App() {
  return <TestDoubleUseEffect></TestDoubleUseEffect>
}
export default App