useRef

useRef 返回一个可变的 ref 对象，其 .current 属性被初始化为传入的参数（initialValue）。返回的 ref 对象在组件的整个生命周期内保持不变。

创建调用useRef挂钩的时候给默认值null很重要，因为React.useRef只能为null或者element对象

import React, {useRef} from "react";

const Login = observer(() => {
    const {AuthStore} = useStore();
    const container = useRef(null);
    console.log(container)  // null
    
    const newText = (e)=>{
        console.log(container.current)  // <input type="text">
    }

    return (
      <Layout>
        <h3>{AuthStore.values.userName}</h3>
        <input type='text' onChange={newText} ref={container}/>
      </Layout>
    );
  }

useState

返回一个 state，以及更新 state 的函数。

在初始渲染期间，返回的状态 (state) 与传入的第一个参数 (initialState) 值相同。

setState 函数用于更新 state。它接收一个新的 state 值并将组件的一次重新渲染加入队列。

用法：

const [n.setN] = useState(0) // 0作为默认值传进去

值得注意的是，react不应允许我们擅自修够n的值，需要重新创建一个值，在渲染值前，去读取最新的n值，在渲染到界面上，注意

与 class 组件中的 setState 方法不同，useState 不会自动合并更新对象。你可以用函数式的 setState 结合展开运算符来达到合并更新对象的效果。

setState(prevState => {
  // 也可以使用 Object.assign
  return {...prevState, ...updatedValues};
});

useReducer 是另一种可选方案，它更适合用于管理包含多个子值的 state 对象。

useEffect

该 Hook 接收一个包含命令式、且可能有副作用代码的函数。//官方解释

类似于class类写法中的生命周期钩子

useEffect（fn，deps） // 参数接受一个函数，和一个数组

与钩子做一个比较

useEffect(()=>{},[]) // 第二个参数数组为空，
//相似
ComponentDidMount // 将要挂载页面时

//值得注意的是，ComponentDidUpdate只在数据更新的时候去执行，而useEffect在依赖产生变化的是后更新之外，也会在页面初始化的时候更新，

useEffect(()=>{},[x]) // 如果有依赖，
//相似
ComponentDidUpdate

useContenxt

接收一个 context 对象（React.createContext 的返回值）并返回该 context 的当前值。当前的 context 值由上层组件中距离当前组件最近的 <MyContext.Provider> 的 value prop 决定。

cosnt x = createContext()

<x.provider value=''>
   <ChildrenComponents/>
</x.prvider>

const ChildrenComponents = (x)=。{
    cosnt y = useContext
}

别忘记 useContext 的参数必须是 context 对象本身：

//如同上面的x

正确： useContext(MyContext)
错误： useContext(MyContext.Consumer)
错误： useContext(MyContext.Provider)

自定义Hooks

自定义 Hook 是一个函数，其名称以 “use” 开头，函数内部可以调用其他的 Hook。

//重点必须是use开头的函数

cosnt useName = ()=>{
const friendList = [
  { id: 1, name: 'Phoebe' },
  { id: 2, name: 'Rachel' },
  { id: 3, name: 'Ross' },
];
    cosnt [name,setName] = useState(friendList)
    
    setUser = (obj)=>{
        setName([...name,...obj])
    }
    
    return {setUser}
}

const Home = ()=>{
    cosnt {setUser} = useName()
    onClick = ()=>{
     setUser({id:4,name:'x'})
    }
}

React-Hooks

useRef

useState

useEffect

useContenxt

自定义Hooks