react 大杂烩

组件

1.是返回标签的js函数，是可重复利用的UI元素

function test(){
return (

test

);
}

2.构建组件：

（1）export 导出组件

（2）定义函数，名称必须以大写字母开头

（3）添加标签

3.具名导出

将test组件从test.tsx导出

import { test } from ‘./test’

4.JSX标签只能返回一个根元素，用父标签包裹

标签必须闭合

驼峰命名

5.JSX与大括号

通过{}使用JS变量

使用场景：jsx内的文本，=后的属性

{{}}，包裹的对象

6.props传递

Props 反映了组件在任何时间点的数据

传递：通过jsx

读取：

function Avatar({ person, size }) {
// 在这里 person 和 size 是可访问的
}

7.条件渲染

if语句，&&和？：运算符选择性渲染jsx

{cond ? : } 表示 “当 cond 为真值时, 渲染 ，否则 ”

{cond && } 表示 “当 cond 为真值时, 渲染 ，否则不进行渲染”

8.渲染列表

数据存在列表中，通过map()或filter()遍历，用

• 包裹并返回

直接放在map()方法中的元素要指定key，一般使用能从给定数据中稳定取得的值

State和生命周期

useState的唯一参数是state变量的初始值，state变量保存上次渲染的值，state setter函数更新state并触发react重新渲染组件

state是隔离且组件私有的

state管理部分

没有在网站上找到生命周期的内容

23-06-21

Hook

1.Hooks ——以 use 开头的函数——只能在组件或自定义 Hook的最顶层调用，不能在条件语句、循环语句或其他嵌套函数内调用 Hook。

useState

setState是异步的，虽然时间很短，但不足以在上一行代码设置，下一行代码就使用，即state 的值始终”固定“在一次渲染的各个事件处理函数内部。

批处理：React 会等到事件处理函数中的所有代码都运行完毕再处理 state 更新。这允许更新多个变量，而不会触发太多次重新渲染。但也因此只有其他代码执行完毕后，ui才会更新。

如果想在下一次渲染之前多次更新同一个state，可以像setNumber(n => n + 1)传入更新函数。

组件的渲染：初次渲染、修改state会触发组件渲染

只想更新state中对象的部分属性，可以使用…对象传播语法，更新嵌套对象，需要一层层展开

setPerson({
…person, // Copy the old fields
firstName: e.target.value // But override this one
});

更新state中的数组：

添加元素，concta，[…arr]，why？因为state只能通过setstate修改，使用[].push会修改state

删除元素，filter，slice

替换，map

排序，先用临时变量拷贝数组（浅拷贝），排序后再用setState

构建state的原则：

合并关联的state

避免互相矛盾的state

避免冗余的state，如果可以使用两个state表达第三个state，那就不需要三个state

避免重复的state

避免深度嵌套的state

状态提升：

当希望两个组件的状态始终同步更改，可以将相关 state 从这两个组件上移除，并把 state 放到它们的公共父级，再通过 props 将 state 传递给这两个组件

移除一个组件的时候，也会销毁它内部的state，只有在相同位置渲染同样的组件，才保留。

可以通过为一个子树指定一个不同的 key 来重置它的 state。

useContext

Context 使组件向其下方的整个树提供信息（传递多层）

使用场景：

主题，在应用顶层放一个 context provider，提供一个统一的主题模式

当前账户，许多子组件需要当前登陆的用户信息

路由

状态管理

创建方法：

通过 export const MyContext = createContext(defaultValue) 创建并导出 context。

在无论层级多深的任何子组件中，把 context 传递给 useContext(MyContext) Hook 来读取它。

在父组件中把 children 包在 <MyContext.Provider value={…}> 中来提供 context。

Context 会穿过中间的任何组件

useRef

使用场景：记住一些信息，但不想让这些信息触发渲染

通过ref.current访问数据

更改时不会触发重新渲染，可以在渲染过程之外修改和更新current的值

子组件使用父组件的ref时，直接往子组件传ref

父组件使用子组件的ref时需要使用forwardRef

23-06-25

useEffect

useEffect(() => {
// This runs after every render
});

useEffect(() => {
// This runs only on mount (when the component appears)
}, []);

useEffect(() => {
// This runs on mount and also if either a or b have changed since the last render
}, [a, b]);

return：一般返回一个清理函数，每次effect再次运行之前，react都会调用这个清理函数，最后一次是在组件卸载（被删除）时调用。

effect是由渲染本身引起的，默认情况下，effect在初始渲染和每次再次渲染后运行。

依赖项为空时，仅在组件挂载时执行。

所使用的所有依赖都要写到依赖项中。

如果Effect 的所有依赖项都具有与上次渲染期间相同的值，React 将跳过 Effect。

在严格模式下，React 会挂载组件两次（仅在开发中）来对effect进行压力测试。

什么时候应该使用：

1.控制非react的ui部件：某些api不允许连续调用两次，因此在重新渲染前应该先关闭（通过清理函数），再重新调用

2.订阅：订阅了某些内容，每次只能有一个activate的订阅

3.触发动画：清理函数中需要把时间轴重置为初始状态

4.获取数据：通过数据请求链接获取数据，清理函数中需要中断数据链接或忽略之前请求的数据结果

5.发送analytics

不必要的场景：

1.能够根据state或者props来更新state

2.用useMemo换成昂贵的计算结果

useState

const [state, setState] = useState(initialState);

向组件添加状态

set函数允许将state更新为不同的值并触发渲染

提供的新值与当前state相同，将skip re-rendering 组件及其子组件

调用set函数不会改变运行代码中的状态

import React from ‘react’
import {View,Text,Button} from ‘@mrn/react-native’
import {useState} from ‘react’
export function test(){
const [count,setCount]=useState(1);
function handleClick(){
setCount(count+1);
}
return (
<>


function test+{count}



</>);
}

useEffect

将组件与外部系统（不受react控制的代码）同步

useEffect(setup, dependencies?)

setup：具有效果逻辑的function，dependencies：需要包括在function中使用到的组件中的每个值

return undefined

import { useEffect } from ‘react’;
import { createConnection } from ‘./chat.js’;

function ChatRoom({ roomId }) {
const [serverUrl, setServerUrl] = useState(‘https://localhost:1234’);

useEffect(() => {
const connection = createConnection(serverUrl, roomId);
connection.connect();//连接
return () => {
connection.disconnect();//断开
};
}, [serverUrl, roomId]);
// …
}

useCallback

在重新渲染之间缓存function定义（？）

const cachedFn = useCallback(fn, dependencies)

fn：要缓存的函数值，dependencies：fn中涉及到的所有的reactive values

return 传递的function

使用：

1.跳过组件的重新渲染：当一个组件重新渲染时，React 会递归地重新渲染它的所有子组件，通过useCallback包装的function，可以保证它在重新渲染是相同的function

2.从被memorized的callback（？）中更新state

3.防止Effect过于频繁地触发

4.优化自定义Hook

useMemo

在重新渲染之间缓存计算结果

const cachedValue = useMemo(calculateValue, dependencies)

calculateValue：计算要缓存的值的函数

初次渲染时，返回不带参数，下一次渲染期间返回上次渲染中已存储的值

使用：

1.跳过昂贵的重新计算

2.跳过组件的重新渲染

3.记忆另一个Hook依赖

4.记忆一个function

useRef

引用一个不需要渲染的值

const ref = useRef(initialValue)

initialValue：ref 对象的 current 属性的初始值。可以是任意类型的值。这个参数会首次渲染后被忽略。

返回一个只有一个属性的对象:

current：最开始被设置为传递的 initialValue。之后可以把它设置为其他值。如果把 ref 对象作为一个 JSX 节点的 ref 属性传递给 React，React 将为它设置 current 属性。

在后续的渲染中，useRef 将返回同一个对象。

可以修改ref.current的属性，除了初始化以外不要在渲染期间写入 或者读取 ref.current

使用：

1.用ref引用一个值

2.操作DOM

3.避免重复创建ref的内容