useState - 回调函数的参数

Posted 2023-05-10

参考技术A 使用场景

参数只会在组件的初始渲染中起作用，后续渲染时会被忽略。如果初始 state 需要通过计算才能获得，则可以传入一个函数，在函数中计算并返回初始的 state，此函数只在初始渲染时被调用

语法

const [name, setName] = useState(()=> 

  // 编写计算逻辑    return '计算之后的初始值'

)

语法规则

回调函数return出去的值将作为 name 的初始值

回调函数中的逻辑只会在组件初始化的时候执行一次

语法选择

如果就是初始化一个普通的数据 直接使用 useState(普通数据) 即可

如果要初始化的数据无法直接得到需要通过计算才能获取到，使用useState(()=>)

来个需求

import useState from 'react'

function Counter(props)

  const [count, setCount] = useState(() =>

    return props.count

  )

  return (

    <div>

      <button onClick=() => setCount(count + 1)>count</button>

    </div>

  )



function App()

  return (

    <>

      <Counter count=10 />

      <Counter count=20 />

    </>

  )



export default App

带有回调的 React Hooks useState [重复]

【中文标题】带有回调的 React Hooks useState [重复]

【英文标题】：React Hooks useState with callback [duplicate]

【发布时间】：2020-06-13 09:42:40

【问题描述】：

我正在尝试找到一种方法来模仿callback 的callback 函数，但使用钩子。

我设法创建了一个模仿 useState 函数的方法，但返回一个回调，其中包含更新数据的更改结果。

状态更新后回调的接收返回，从日志中可以看出，回调的接收只有在console.log("App")出现后才返回，行为类似于使用this.state 和callback。

问题是修改后的setState的callback里面，即使更新app后调用，也看不到状态的更新，也就是里面看不到如果我尝试打印更新状态。

根据您的说法，有一个解决方案可以做一些事情来查看它的更新。

const  useState, useRef, useEffect  = React;

function useStateCallback(initialState) 
  const [state, setState] = useState(initialState);
  const cbRef = useRef(null);
  useEffect(() => 
    if (cbRef.current) 
      cbRef.current(state);
      cbRef.current = null;
    
  , [state]);
  return [
    state,
    (value, cb) => 
      cbRef.current = typeof cb === "function" ? cb : null;
      setState(value);
    
  ];


const App =() => 

  const [stateObj, setStateObj] = useStateCallback(
    name: "James",
    surname: "Bond",
    number: 7
  );
  const  name, surname, number  = stateObj;

  useEffect(() => 
    //console.log("componentDidMount", stateObj);
    //console.log("componentDidMount2", stateObj);
    //console.log("useEffect", stateObj);
  , []);

  const change = () => 
    //console.log("componentDidMount", stateObj);
    setStateObj(
      previousValue => (
        ...previousValue,
        name: "Arthur",
        surname: "Conan",
        number: previousValue.number + 14
      ),
      res => 
        console.log("Res:", res, stateObj);
      
    );
    //console.log("componentDidMount2", stateObj);
  ;

  console.log("App", stateObj);

  return (
    <div>
      Name: name
      <br />
      Surname: surname
      <br />
      Number: number
      <br />
      <button onClick=change>Change</button>
      <button onClick=() => console.log(stateObj)>Render</button>
    </div>
  );


ReactDOM.render(
  <App />,
  document.getElementById("root")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>

<div id="root"></div>

【问题讨论】：

您只需要useEffect(() => /* code here */ , [stateObj]);: codesandbox.io/s/ecstatic-sun-exww1

【参考方案1】：

如果我理解您要正确执行的操作，我认为您只需将新状态值作为参数传递给回调调用。这样，您无需将其保存在 ref 中，也无需从 useEffect 更新它：

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

    return [
        state,
        (value, callback) => 
            setState(value);

            if (typeof callback === "function") 
                callback(value);
            
        
    ];

【参考方案2】：

使用钩子，您已经在状态更新时收到回调：再次调用您的组件函数。这是钩子的一个基本方面，更新状态会让 React 再次调用你的组件函数。

例子：

const  useState  = React;

const Example = () => 
    const [counter, setCounter] = useState(0);
    console.log(`Example called, counter = $counter`);
    return (
        <div>
            counter <input type="button" value="+" onClick=() => setCounter(c => c + 1) />
        </div>
    );
;

ReactDOM.render(<Example />, document.getElementById("root"));

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.11.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.11.0/umd/react-dom.production.min.js"></script>

不需要任何其他的 setter 回调。组件是回调。

Dan Abramov 有一篇很好的文章，真的很震撼这个家 here。这是在解释useEffect 的上下文中，但它奠定的基础应该会有所帮助。

【讨论】：

但是当 props 改变或另一个状态更新时，组件也会重新渲染。使用useEffect 会更准确。

@JonasWilms - 是的，这取决于 OP 实际想要做什么，我越来越不确定我是否理解。 :-)