React学习笔记_循环生成多个组件的 usestate

1. react脚手架

初始化项目

npx create-react-app my-app

2. Hooks

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

useState

在组件中添加状态变量

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

useEffect

侦听状态变化，并执行相应逻辑

useEffect(setup, dependencies?)
1

不带参数的 useEffect 函数中不能使用useState方法来改变state，否则会触发无限循环

//不带参数，每次渲染后执行
useEffect(() => {
    console.log("count", count);
});
1
2
3
4

当 useEffect 带参数时，参数的变化才会触发 useEffect 的执行，不变化不执行。可使用 useState

useEffect(() => {
    console.log("count", count);
    console.log("num", num);
}, [num]);
1
2
3
4

当 useEffect 传入空参数 [] 时，只有当第一次渲染（mount） 和不渲染（unmount）时执行。

useEffect(() => {
    console.log("count", count);
}, []);
1
2
3

useContext

父子组件传递状态数据。createContext 能够创建组件间共享的上下文状态，然后通过 useContext 在组件中使用这些状态

import { createContext, useContext } from 'react';

const ThemeContext = createContext(null);

export default function MyApp() {
  return (
    <ThemeContext.Provider value="dark">
      <Button>显示的主题</Button>
    </ThemeContext.Provider>
  )
}

function Button({ children }) {
  const theme = useContext(ThemeContext);
  const className = 'button-' + theme;
  return (
    <button className={className}>
      {children}
    </button>
  );
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

useReducer

useReducer 是 useState 的替代方案。当你想更新的状态中包含多个子值时 或者 当你想更新一个状态，并且这个状态更新依赖于另一个状态的值时，可以使用useReducer，reducer 可以让你把组件内发生了什么(actions)和状态如何响应并更新分开表述。
结合useContext 可以实现 Redux 组件间共享状态管理

const [state, dispatch] = useReducer(reducer, initialArg, init?)
1

第三个参数如果没值，则将初始状态设置为initialArg。否则，将初始状态设置为呼叫init(initialArg)的结果

import { useReducer } from 'react';

function reducer(state, action) {
  switch (action.type) {
    case "minus_age":
      return {
        age: state.age > 0 ? (state.age - 1) : 0
      };
    default:
      return {
        age: state.age + 1
      };
  }
}

export default function Counter() {
  const [state, dispatch] = useReducer(reducer, { age: 42 });
  return (
    <>
      <button onClick={() => {
        dispatch({ type: 'add_age' })
      }}>
        Add age
      </button>
      <button onClick={() => {
        dispatch({ type: 'minus_age' })
      }}>
        Minus age
      </button>
      <p>Hello! You are {state.age}.</p>
    </>
  );
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

和useState的setState不一样的是，useReducer返回的dispatch函数是用来触发某些改变state的action而不是直接设置state的值

useMemo

相当于计算属性

const cachedValue = useMemo(calculateValue, dependencies)
1

 export default function Counter() {
   const clickFn = useMemo(() => {
      let sum = 0;
      for (let i = 0; i < 100*count; i++) {
        sum += i;
      }
      return sum;
   },[count]);
   //当依赖的count发生改变才去重新计算，return值出来
   
   return(
     <div>获得总数{clickFn}</div>
   )   
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

useCallback

避免子组件不必要的重新渲染，依赖数据改变传入新函数否则保留原函数

const cachedFn = useCallback(fn, dependencies)
1

useMemo和useCallback接收的参数都是一样，都是在其依赖项发生变化后才执行，都是返回缓存的值。而useEffect没有返回
区别在于useMemo返回的是函数运行的结果，useCallback返回的是函数。
useCallback(fn, deps) 与 useMemo(() => fn, deps). 是等价的，

useRef

useRef 返回一个引用了DOM的对象，返回的对象将在组件的整个生存期内持续存在。相当于为this赋值

const ref = useRef(initialValue)
1

import { useRef } from 'react';

export default function Form() {
  const inputRef = useRef(null);
  
  function handleClick() {
    //点击使input框获取焦点
    inputRef.current.focus();
  }

  return (
    <>
      <input ref={inputRef} />
      <button onClick={handleClick}>
        Focus the input
      </button>
    </>
  );
}

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

useRef和createRef的区别是createRef 每次渲染都会返回一个新的引用，而 useRef 每次都会返回相同的引用，可以在 useRef 对象上存放缓存的值。

3. API

forwardRef

转发ref，将dom暴露给父组件

import { forwardRef, useRef } from 'react';

const MyInput = forwardRef(function MyInput(props, ref) {
  return (
    <label>
      {props.label}
      <input ref={ref} />
    </label>
  );
});

export default function Form() {
  const ref = useRef(null);

  function handleClick() {
    ref.current.focus();
  }

  return (
    <form>
      <MyInput label="Enter your name:" ref={ref} />
      <button type="button" onClick={handleClick}>
        Edit
      </button>
    </form>
  );
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

使用forwardRef和useImperativeHandle限制父组件调用子组件的Api

import { forwardRef, useRef, useImperativeHandle } from 'react';

const MyInput = forwardRef(function MyInput(props, ref) {
  const inputRef = useRef(null);
  
  useImperativeHandle(ref, () => {
    return {
      focus() {
        inputRef.current.focus();
      },
      scrollIntoView() {
        inputRef.current.scrollIntoView();
      },
    };
  }, []);
  
  return <input {...props} ref={inputRef} />
});

export default function Form() {
  const ref = useRef(null);

  function handleClick() {
    //父组件获得了 MyInput 的 ref，能通过该 ref 来调用 focus 和 scrollIntoView 方法
    //但是它的访问是受限的，无法读取或调用下方 <input> DOM 节点的其他所有属性和方法
    ref.current.focus();
    // 下方代码不起作用，因为 DOM 节点并未被暴露出来：
    // ref.current.style.opacity = 0.5;
  }

  return (
    <form>
      <MyInput label="Enter your name:" ref={ref} />
      <button type="button" onClick={handleClick}>
        Edit
      </button>
    </form>
  );
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

ref有一个current属性，可以对这个属性进行操作，用于获取DOM元素和保存变化的值。
不要滥用ref，仅在没法通过 prop 来表达 命令式 行为的时候才使用 ref，比如滚动到指定节点、聚焦某个节点、触发一次动画、选择文本等
如果可以通过prop实现，就不要使用ref ，useEffect 可以通过 prop 来暴露一些命令式的行为