useState -回调函数的参数

使用场景

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

语法

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

语法规则

语法选择

代码

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 ()=>{    
  const res = await axios.get('http://geek.itheima.net/v1_0/channels')   
  console.log(res)
},[])

正确写法

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

useEffect(() => {
  //  发送请求
  async function loadData() {
    const res = await fetch('http://geek.itheima.net/v1_0/channels')
    console.log(res)
  }
  loadData()
}, [])

useRef

使用场景

使用步骤

获取dom

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

获取组件实例

import React, { useRef } from 'react'
class TeastC extends React.Component {
  render() {
    return (
      <div>我是类组件</div>
    )
  }
}

function App() {
  const testRef = useRef(null)

  useEffect(() => {
    console.log(testRef.current)
  })
  // useEffect回调 是在dom渲染之后还是之前执行？ 之后！
  return (
    <div>
      <TeastC ref={testRef} />
    </div>
  )
}

useContext

实现步骤

代码实现

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

function ConA() {
  // 底层组件通过useContext函数获取数据 
  const count = useContext(Context)
  return (
    <div>
      this is ConA
      app传过来的数据是：{count}
      <ConC />
    </div>
  )
}

function ConC() {
  // 底层组件通过useContext函数获取数据 
  const count = useContext(Context)
  return (
    <div>
      this is ConC
      app传过来的数据是：{count}
    </div>
  )
}

function Demo() {
  const [count, setCount] = useState(10)
  return (
    // 顶层组件通过Provider 提供数据 
    <Context.Provider value={count}>
      <div>
        <ConA />
        <button onClick={() => { setCount(count + 1) }}>+</button>
				//提供方修改count数据之后,使用方也会更新这个数据
      </div>
    </Context.Provider>
  )
}
//打印结果: 
this is ConA app传过来的数据是：10
this is ConC app传过来的数据是：10