React--hooks详解（进阶）

useState - 回调函数的参数

        使用场景：参数只会在组件的初始渲染中起作用，后续渲染时会被忽略。如果初始 state 需要通过计算才能获得，则可以传入一个函数，在函数中计算并返回初始的 state，此函数只在初始渲染时被调用

        语法：

const [name, setName] = useState(()=>{   
  // 编写计算逻辑    return '计算之后的初始值'
})

        语法规则：

1. 回调函数return出去的值将作为 name 的初始值
2. 回调函数中的逻辑只会在组件初始化的时候执行一次 ​​

        语法选择：

1. 如果就是初始化一个普通的数据 直接使用 useState(普通数据) 即可
2. 如果要初始化的数据无法直接得到需要通过计算才能获取到，使用 useState(()=>{}) 

        代码案例：

import { useState } from 'react'

function Counter(props) {
  const [count, setCount] = useState(() => {
    return props.count
  })
  return (
    <div>
      <button onClick={() => setCount(count + 1)}>{count}</button>
    </div>
  )
}

function App() {
  return (
    <>
      <Counter count={10} />
      <Counter count={20} />
    </>
  )
}

export default App

useEffect - 发送网络请求

        使用场景：如何在useEffect中发送网络请求，并且封装同步 async await操作

        语法要求：不可以直接在useEffect的回调函数外层直接包裹 await ，因为异步会导致清理函数无法立即返回

useEffect(async ()=>{    
    const res = await axios.get('http://bai.net/v10/channels')   
    console.log(res)
},[])

        正确写法：在内部单独定义一个函数，然后把这个函数包装成同步

useEffect(()=>{   
    async function fetchData(){      
       const res = await axios.get('http://bai.net/v10/channels')
       console.log(res)   
    } 
},[])

useRef

        使用场景：在函数组件中获取真实的dom元素对象或者是组件对象

        使用步骤：

1. 导入 useRef 数
2. 执行 useRef  函数并传入null，返回值为一个对象 内部有一个current属性存放拿到的dom对象（组件实例）
3. 通过ref 绑定 要获取的元素或者组件

        获取dom：

import { useEffect, useRef } from 'react'
function App() {  
    const h1Ref = useRef(null)  
    useEffect(() => {    
        console.log(h1Ref)  
    },[])  
    return (    
        <div>      
            <h1 ref={ h1Ref }>this is h1</h1>    
        </div>  
    )
}
export default App

        获取组件实例：函数组件由于没有实例，不能使用ref获取，如果想获取组件实例，必须是类组件

class Foo extends React.Component {  
    sayHi = () => {    
        console.log('say hi')  
    }  
    render(){    
        return <div>Foo</div>  
    }
}
    
export default Foo

import { useEffect, useRef } from 'react'
import Foo from './Foo'
function App() {  
    const h1Foo = useRef(null)  
    useEffect(() => {    
        console.log(h1Foo)  
    }, [])  
    return (    
        <div> <Foo ref={ h1Foo } /></div>  
    )
}
export default App

useContext

        实现步骤：

1. 使用 createContext 创建Context对象
2. 在顶层组件通过 Provider 提供数据
3. 在底层组件通过 useContext 函数获取数据        

        代码实现：

import { createContext, useContext } from 'react'
// 创建Context对象
const Context = createContext()

function Foo() {  
    return <div>Foo <Bar/></div>
}

function Bar() {  
    // 底层组件通过useContext函数获取数据  
    const name = useContext(Context)  
    return <div>Bar {name}</div>
}

function App() {  
    return (    
        // 顶层组件通过Provider 提供数据    
        <Context.Provider value={'this is name'}>     
            <div><Foo/></div>    
        </Context.Provider>  
    )
}

export default App

文章推荐 

1. React--hooks详解（入门）
2. React组件（进阶--生命周期 ）
3. React组件（进阶--children/props）
4. React组件通信（入门）
5. React组件动状态（入门）