React 学习

• 事件调用

onClick = {定义的处理函数}

获取到触发的dom，只需要在传入e

如果想传递自定义参数，需要变成箭头函数调用的形式

onClick = {(e) => handle("参数", e)}

• useState

let [count, setCount] = useState(0)

实现对数据的双向绑定，count是绑定后的状态值，setCount用于更新状态

状态不可变，无法直接修改，而应该传入新值（调用set方法）

• useRef

获取/操作dom元素

function App(){
    // 在dom渲染完成后，inputRef.current即可获取到dom
    const inputRef = useRef(null);

    return (
        <input  ref = {inputRef}/>
    )
} 

• 组件通信

1. 父传子

给子组件绑定上自定义属性，子组件接收props，props即包含了所有传输的属性值

注意：props是只读属性，子组件不可直接修改，只能有父组件来修改

当在子组件标签内部添加内容时，会自动传递到props.children里

2. 子传父

在子组件中调用父组件的函数并传参

3. 兄弟之间

通过状态提升，将数据传给共同的父组件，再通过父传子实现传递

4. 跨层级组件传递

利用context机制

使用useContext方法创建上下文对象

顶层ctx.Provider组件提供数据

底层通过useContext钩子获取数据

• useEffect

useEffect(()=>{ 
//额外操作
}, [])
// 空数组时页面渲染后即执行

没有依赖项时，组件初始渲染+组件更新时执行

空数组，只在初始渲染时执行一次

特定依赖项，组件初始渲染+依赖项变化时执行

useEffect(()=>{ 
//实现副作用操作逻辑

return ()=> {
    // 清除副作用逻辑
}

}, [])
// 空数组时页面渲染后即执行

清除副作用的函数最常见在组件卸载时自动被调用

• 自定义Hook

声明一个use开头的函数

在函数体内封装可复用逻辑

将组件的函数或状态return出去

接收return值

注意：只能在组件内使用；只能在顶层使用，不能在if、for内