很多好答案，但都遗漏了一些例子，考虑到react/ react native中的钩子

正如上面的回答中所写的，回调不应该在子组件内部被“调用”，而只能被引用。

这意味着什么? 让我们考虑一个父组件，它有2个改变rgb颜色的子组件:

import React, { useState } from "react"
import {View, Text, StyleSheet } from "react-native"
import ColorCounter from "../components/ColorCounter"

const SquareScreen = () =>{
  const [red, setRed] = useState(0)
  const [blue, setBlue] = useState(0)
  const [green, setGreen] = useState(0)

 return (
   <View>
     <ColorCounter 
       onIncrease={() => setRed(red + 15)}
       onDecrease={() => setRed(red - 15)}
       color="Red"
     />
     <ColorCounter 
       onIncrease={() => setBlue(blue + 15)}
       onDecrease={() => setBlue(blue - 15)} 
       color="Blue" 
     />
     <ColorCounter 
       onIncrease={() => setGreen(green + 15)}
       onDecrease={() => setGreen(green - 15)}
       color="Green" 
     />
    <View 
      style={{ 
        height:150,
        width:150, 
        backgroundColor:`rgb(${red},${blue},${green})`
      }}
    />
    </View>
 )   
}

const styles = StyleSheet.create({})

export default SquareScreen

这是子按钮组件:

import React, { useState } from "react"
import {View, Text, StyleSheet, Button } from "react-native"

const ColorCounter = ({color, onIncrease, onDecrease}) =>{
  return (
    <View>
      <Text>{color}</Text>
      <Button onPress={onIncrease}  title={`Increase ${color}`} /> --> here if you use onPress={onIncrease()} this would cause a call of setColor(either setRed,SetBlue or setGreen) that call again onIncrease and so on in a loop)
      <Button onPress={onDecrease}  title={`Decrease ${color}`} />
    </View>  
  )  
}

export default ColorCounter

1.如果我们想在调用中传递参数，那么我们需要像下面这样调用方法 因为我们使用的是箭头函数，所以不需要在构造函数中绑定方法。

onClick={() => this.save(id)} 

当我们像这样在构造函数中绑定方法时

this.save= this.save.bind(this);

然后，我们需要调用该方法而不传递任何参数，如下所示

onClick={this.save}

我们尝试在调用函数时传递参数 如下所示，然后误差就像最大深度超出。

 onClick={this.save(id)}

你应该在调用函数时传递事件对象:

{<td><span onClick={(e) => this.toggle(e)}>Details</span></td>}

如果你不需要处理onClick事件，你也可以输入:

{<td><span onClick={(e) => this.toggle()}>Details</span></td>}

现在还可以在函数中添加参数。

当我使用useEffect像这个useEffect(() =>{})，添加[]到它，像这个useEffect(() =>{}，[])。

最近我得到了这个错误:

错误:迷你反应错误#185;访问https://reactjs.org/docs/error-decoder.html?invariant=185获取完整消息，或者使用非简化的开发环境获取完整错误和其他有用警告。

您刚刚遇到的错误的全文如下:

超过最大更新深度。当组件在componentWillUpdate或componentDidUpdate中反复调用setState时，就会发生这种情况。React限制了嵌套更新的数量，以防止无限循环。

好的。这是我的案例，我使用react函数组件+ react钩子。让我们先看看错误的示例代码:

import { useEffect, useState } from "react";
const service = {
  makeInfo(goods) {
    if (!goods) return { channel: "" };
    return { channel: goods.channel };
  },
  getGoods() {
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve({
          channel: "so",
          id: 1,
          banners: [{ payway: "visa" }, { payway: "applepay" }]
        });
      }, 1000);
    });
  },
  makeBanners(info, goods) {
    if (!goods) return [];
    return goods.banners.map((v) => {
      return { ...v, payway: v.payway.toUpperCase() };
    });
  }
};
export default function App() {
  const [goods, setGoods] = useState();
  const [banners, setBanners] = useState([]);

  useEffect(() => {
    service.getGoods().then((res) => {
      setGoods(res);
    });
  }, []);

  const info = service.makeInfo(goods);

  useEffect(() => {
    console.log("[useEffect] goods: ", goods);
    if (!goods) return;
    setBanners(service.makeBanners({}, goods));
  }, [info, goods]);

  return <div>banner count: {banners.length}</div>;
}

服务过程API调用，并有一些方法转换DTO数据视图模型。这与React无关。也许你的项目中有这样的服务。

我的逻辑是，横幅视图模型是从API返回的商品数据构建的。

useEffect({…}， [info, goods])有两个依赖项:info和goods。

当info和goods发生变化时，useEffect钩子将重新执行，设置横幅视图模型，看起来不错，对吧?

不!这将导致内存泄漏。useEffect钩子将无限地执行。为什么?

因为当setBanner()执行时，组件将重新呈现，const info = service.makeInfo(goods);语句将再次执行，返回一个新的info对象，这将导致useEffect的deps改变，导致useEffect再次执行，形成一个死循环。

解决方案:使用useMemo返回一个记忆值。使用这个记忆值作为useEffect钩子的依赖项。

// ...
 const info = useMemo(() => {
    return service.makeInfo(goods);
  }, [goods]);

  useEffect(() => {
    console.log("[useEffect] goods: ", goods);
    if (!goods) return;
    setBanners(service.makeBanners({}, goods));
  }, [info, goods]);

//... 

Codesandbox

只需删除()，但如果是useEffect的情况，则

const [isInitialRender, setIsInitialRender] = useState(true); useEffect(() => { const data = localStorage.getItem("auth"); 如果(isInitialRender) { setIsInitialRender(假); If(数据){ const parsed = JSON.parse(data); setAuth({…认证，用户:已解析。用户，令牌:已解析。令牌}); ｝ ｝ }， [auth, isInitialRender]);

isInitialRender true和false将避免你陷入循环