Catalyst

React 备忘

后悔上次用的时候没写笔记……忘光了。现在用到啥再记啥吧。

Hooks

useState

useState 可以设置函数组件的state(每次刷新时保留的数据 )。传入的参数是初始化数据。

import React, { useState } from "react";

//解构出的是数据和设置数据的函数
//解构出的内容可以直接用
const [count, setCount] = useState(0);

useEffect

套在有副作用的函数外面。默认情况下执行时间是在每次完整渲染之后。

有条件地执行,使用 useEffect(()=>{},[val]) 形式。第二个参数是订阅(依赖)的变量,useEffect 通过比较第二个参数,判断发生变化时执行函数,更新值,如果第二个参数是[]则只执行一次——但最好根据依赖的值来写参数。

使用在 useEffect 外面的函数,则用 useCallback 包裹住外函数,保证只在必要的时候触发变化。

useCallback

返回一个缓存的 callback,依赖的变量不变则不变。

组件传值

// 使用时
<Compent <属性>=<> />

// 定义时
const Compent = (props)=>{
  return(<div>{props.<属性>}</div>)
}

子组件给父组件传值:将改变值内容的函数传给子组件,类slot用法:

<Modal>
  <span>传入</span>
</Modal>

在子组件的props里的children里获得。