React 基础事件绑定

on+ 事件名称={事件处理程序}

箭头函数可以传递实参

useState

向组件添加一个状态变量

const [count,setCount]=useState(0)

useState 是一个函数，返回值是一个数组

数组中第一个参数是状态变量，第二个参数是 set 函数用来修改状态变量。

useState 的参数将作为 count 的初始值。

在 React 中，状态被认为是只读的，我们应该始终替换它，而不是修改它，直接修改状态不能引发视图更新。

规则：对于对象类型的状态变量，应该始终传给 set 方法一个全新的对象来修改。

使用 useState 控制表单状态

const [value ,setValue]=useState('')

<input
	type="text"
	value={value}
	onChange={(e)=>setValue(e.target.value)}
/>

父传子通过 props 传递。

使用 Context 机制跨层级组件通信。

1.使用 createContext 方法创建一个上下文对象 Ctx

2.在顶层组件 App 中通过 Ctx.Provider 组件提供数据

3.在底层组件 B 中通过 useContext 钩子函数获取消费数据

在 react 组件中创建不是由事件引起，而是由渲染引起的操作。组件渲染完毕要和服务器要数据。

useEffect(()=>{})
//函数内放要执行的操作
//数组，空数组时，函数只会在组件渲染完毕之后执行一次

useEffect(()=>{
//实现副作用操作逻辑
  return ()=>{
//清除副作用
  }
},[])

一般用于组件卸载时自动执行

自定义 Hook 函数是以 use 打头的函数，通过自定义 Hook 函数可以实现逻辑的封装和复用。

1、声明以 use 打头的函数。

2、在函数体内封装可复用的逻辑。

3、把组件中用到的状态或者回调 return 出去。

4、在哪个组件中要用到这个逻辑，就执行这个函数，解构出来状态和回调进行使用。