组件
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文章来源：https://www.toymoban.com/news/detail-693538.html
3.避免重复创建ref的内容文章来源地址https://www.toymoban.com/news/detail-693538.html
到了这里，关于react 大杂烩的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
