state - 组件传值

useReducer：https://blog.csdn.net/stone805/article/details/92786377

useState: https://www.jb51.net/article/234458.htm

?

1 2	const [state,dispatch]=useReducer(reducerMethomd,initState); reducerMethomd(state,type) //参数

　　

一 设置state

在function设置state

const [ab,setAb] =useState("abVal");

?

1 2 3 4 5 6 7 8

import { useState } from 'react'; function  aa（）{  const [abc ,getAbc]=useSate(false);  const [abcd ,getAbcd]=useSate("abcd"); //第一参数是变量  第二参数是调用的set方法 //第二参数直接在方法里调佣   }

 

二  state 队列

 1.传递转态 ，传递函数

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

1. 传递状态：即参数是useState中的第一个参数， //就像点餐时的服务员，全部点完后才去拿菜  <button onClick={() => {         setNumber(number + 1);         setNumber(number + 1);         setNumber(number + 1);       }}>+3</button>   2. 传递函数 ，可以传递。 <button onClick={() => {         setNumber(n => n + 1);         setNumber(n => n + 1);         setNumber(n => n + 1);       }}>+3</button>   3.既传递状态，有传递函数  <button onClick={() => {         setNumber(number + 5);         setNumber(n => n + 1);    //就会覆盖前面的代码       //  setNumber(42);       }}

　　await delay(3000)

?

1 2 3 4 5 6

async function handleClick() {     setPending(pending + 1);     await delay(3000);     setPending(pending - 1);     setCompleted(completed + 1);   }

　　onPointerMove

?

1 2 3 4

onPointerMove={e => {   position.x = e.clientX;   position.y = e.clientY; }}

　　

三 组件中传参 {children}

export default function AA()

但隔一行是组件，然后list重新写的一个function

?

1 2 3 4 5 6 7 8 9 10

export default function Section({ children }) {   return (     <section className="section">       {children}     </section>   ); }   引用： import Section from './Section.js';

　　

Step 1: Create the context  : 需要创建上下文

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

import { createContext } from 'react';   export const LevelContext = createContext(1); 　 引用： import { LevelContext } from './LevelContext.js';   //1. 之前的level是传递过来   export default function Heading({ level, children }) {   // ... }   2.这时，不用level 而是const level =useContext(LevelContext) export default function Heading({ children }) {   const level = useContext(LevelContext); //... }

　　

 <LevelContext.Provider value={level + 1}>

 2. jsx

?

1 2 3 4 5 6 7 8

export default function App{ return (     <>       <Counter />       {showB && <Counter />}       {const 元素}     </>) }

　　

参考自:https://reactjs.bootcss.com/learn/managing-state