箱包东莞网站建设,网页制作如何设置网页背景,做任务的兼职网站,网页设计板式网站组件
1.是返回标签的js函数#xff0c;是可重复利用的UI元素
function test(){ return ( test ); }
2.构建组件#xff1a;
#xff08;1#xff09;export 导出组件
#xff08;2#xff09;定义函数#xff0c;名称必须以大写字母开头
#xff08;3#xff09…组件
1.是返回标签的js函数是可重复利用的UI元素
function test(){ return ( test ); }
2.构建组件
1export 导出组件
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 删除元素filterslice 替换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(count1); } return ( function test{count} /); } useEffect 将组件与外部系统不受react控制的代码同步 useEffect(setup, dependencies?) setup具有效果逻辑的functiondependencies需要包括在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要缓存的函数值dependenciesfn中涉及到的所有的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) initialValueref 对象的 current 属性的初始值。可以是任意类型的值。这个参数会首次渲染后被忽略。 返回一个只有一个属性的对象: current最开始被设置为传递的 initialValue。之后可以把它设置为其他值。如果把 ref 对象作为一个 JSX 节点的 ref 属性传递给 ReactReact 将为它设置 current 属性。 在后续的渲染中useRef 将返回同一个对象。 可以修改ref.current的属性除了初始化以外不要在渲染期间写入 或者读取 ref.current 使用 1.用ref引用一个值 2.操作DOM 3.避免重复创建ref的内容
