在useEffect中监听state变化,存进ref中

import './App.css';
import React, { useState,useRef,useEffect} from 'react';
function App() {
    let [count,setCount]=useState(0)
    const myRef = useRef(null);
    const handleClick=(d)=>{
       setCount(count+3)
       console.log(myRef.current)
    useEffect(() => {
        myRef.current=count+3
   }, [count])
  return (
    <div className="App">
      <header className="App-header">
            <p>{count}</p>
            <button onClick={handleClick}>+</button>
      </header>
    </div>
export default App;

2.直接用useEffect监听变量

import './App.css';
import React, { useState,useRef,useEffect} from 'react';
function App() {
    let [count,setCount]=useState(0)
    const handleClick=(d)=>{
       setCount(count+3)
    useEffect(() => {
       console.log(count)
   }, [count])
  return (
    <div className="App">
      <header className="App-header">
            <p>{count}</p>
            <button onClick={handleClick}>+</button>
      </header>
    </div>
export default App;

3.回调函数传参

函数式更新
如果新的 state 需要通过使用先前的 state 计算得出,那么可以将函数传递给setState。该函数将接收先前的 state,并返回一个更新后的值。

function Example2() { const [number, setNumber] = useState(0); const lazy1 = () => { // 获取点击按钮时的 state setNumber(number + 1); const lazy2 = () => { // 每次执行时都会再去获取新的 state,而不是使用点击触发时的 state setNumber(number => number + 1); return ( <p>{number}</p> <button onClick={() => setNumber(number + 1)}>+</button> <button onClick={lazy1}>lazy1:只能获取点击按钮时候的状态</button> <button onClick={lazy2}>lazy2:每次执行都会重新获取state, 所以获取的都是最新的state</button> export default Example2;

4.自定义hooks

export function useCallbackState(state) {
  const cbRef = useRef();
  const [data, setData] = useState(state);
  useEffect(() => {
    cbRef.current && cbRef.current(data);
  }, [data]);
  return [
    data,
    function(val, callback) {
      cbRef.current = callback;
      setData(val);
                                    新的react hook写法,官方默认setState方法移除了回调函数,但我们有时候的业务场景需要我们同步拿到变量的最新变化值,以便做下一步操作,这时我们可以封装一个hook通过结合useref通过回调函数来拿到最新状态值。
代码如下:
import {useEffect, useState, useRef} from "react";
function useCallbackState1 (state) {
    const cbRef = useRef();
    const [da
const [textList, setTextList] = useState(原数组);
setTextList(新数组);
当修改原数组时,如果原数组是个深层数组(不只一层),使用setTextList修改时,不会触发页面刷新
原因分析:
这个涉及到可变对象和不可变对象的知识,在vue和react中,如果更新可变对象时,可能会引起视图更新,这是因为,vue和react默认都是浅监听,只会监听数据的第一层,内层数据发生改变,并不会监听到
const onEnable = (row,index) => {
    const list = productList;
    list[index].enable = !list[index].enable;
    setProductList(list);
    console.log('o
                                    @rehooks/usePosition React hook for ... 注意:这是使用新的 React Hooks API 提案,该提案在 React 16.7 最终版之前可能会发生变化。
您需要在 ^16.7.0-alpha.0 安装 reactreact-dom 等安装 yarn add @rehooks/usePosition Usage import { useRef } from 'react';
从“@rehooks/usePosition”导入 usePosition;
函数 MyComponent() { let ref = useRef(null);
让{左,上} = usePosition(ref);
在业务代码中使用useState时发现,当我把一个修改后当数据set进state里面后,再次打印state中那个数据是初始状态的值,并未发生改变
const [list, setList] = useState([]);
// 下面在某个方法里面调用
console.log(list); // []
setList([1,2,3]);
console.log(list); // []
类似于通过扩展React.Component或创建的class组件中的setState
React.Pu
                                    React中默认浅监听,当变量为引用类型时,栈中存的是对象的引用(地址),setState改变的是堆中的数据。所以此时set后,栈中的地址还是原地址,React浅监听到地址没变,会认为State并未改变,所以没有重新渲染页面。useState() 属于异步函数,在useState() 第一次存储的时候,值会存储不上。
const [state, setState] = useState(0);
setState((prevState) => prevState + 1); // prevState 是改变之前