标签: react-lifecycle-hooks

我正在尝试div使用 React 钩子创建此旋转示例的副本。https://codesandbox.io/s/XDjY28XoV

到目前为止，这是我的代码

import React, { useState, useEffect, useCallback } from 'react';

const App = () => {
  const [box, setBox] = useState(null);

  const [isActive, setIsActive] = useState(false);
  const [angle, setAngle] = useState(0);
  const [startAngle, setStartAngle] = useState(0);
  const [currentAngle, setCurrentAngle] = useState(0);
  const [boxCenterPoint, setBoxCenterPoint] = useState({});

  const setBoxCallback = useCallback(node => {
    if (node !== null) {
      setBox(node)
    }
  }, [])

  // to avoid unwanted behaviour, deselect all text
  const deselectAll = () => …

如何通过反应钩子在功能组件中使用 componentWillUpdate ？

我知道 React 有一个生命周期方法shouldComponentUpdate，默认情况下返回 true，这就是组件决定更新的方式

但是当该组件的状态或道具发生变化时，如何调用该生命周期方法。当我们收到新的 props 或 state 时会发生什么？当我们将一个组件连接到 redux state 和 mapStateToProps 时，我们是否在检查组件内部值的变化？如果没有，当我们在寻找 state 或 props 的变化时？

当 props 或 state 发生变化时，如何调用生命周期方法？。当 props 或 state 发生变化时，我们是否有一个监听器来调用这些方法？

我在带有依赖项的功能组件内使用 useEffect 钩子，以便依赖项发生变化，useEffect 函数将像这样重新运行：

const [show, setShow] = React.useState(false);

React.useEffect(() => {
 
    console.log("Do something")

} , [show]);

我想知道 React 的类组件中有什么可以做到这一点？有没有任何生命周期方法可以实现此功能？

我真的很想了解 React 功能组件的生命周期。在许多网站中，您会看到这三个步骤：
1-安装2-渲染3-卸载。

但是，在 useeffect() 函数之前编写的其他代码又如何呢，例如假设：

const Countdown = () => {
  let x = 0;
  const [countDown, setCountDown] = useState(10)
   
   x = x + 1
   
   if(x > 100) { 
     x = 0
   }

  useEffect(() => {
    const interval = setInterval(() => {
        setCountDown(countDown - 1);
        console.log(x)
      }, 1000);
    }, [countDown]);
};

我想知道 ：

1. 当 countDown 状态和 x 变量在 useEffect 之前或之后（或内部）声明时？

2. 当if或for 短语被声明时（在此示例if短语中），它们确实在 useEffect 内吗？

什么是加载页面顺序？执行的起点是什么？

当组件加载到 ReactJS 上时，我在调用函数时遇到问题。我尝试使用 componentDidMount() 并编译错误。请检查我下面的代码。谢谢

export default function Customers() {
    const classes = useStyles();
    const searchBarStyles = useStyles2();
    const [page, setPage] = React.useState(0);
    const [rowsPerPage, setRowsPerPage] = React.useState(10);
    const dispatch = useDispatch();

    const handleChangePage = (event, newPage) => {
      setPage(newPage);
    };

    const handleChangeRowsPerPage = (event) => {
      setRowsPerPage(+event.target.value);
      setPage(0);
    };

    const fetch = () => {
      dispatch(fetchPendingAdmissions());
    };

    componentDidMount() {
        fetch()
    }

    return (
      <div>
        <h1 className={classes.h1}>Customers</h1>
        <Paper component="form" className={searchBarStyles.root}>
          <InputBase
            className={searchBarStyles.input}
            placeholder="Search..."
            inputProps={{ 'aria-label': 'search...' }}
          />
          <IconButton type="submit" …

我想在父组件中更改道具后在子组件中执行一个函数，而不必管理子/父中的额外状态。

<ParentCompoenent 
  myCallback={() => {}}
  myList={['a','b','c']}
/>

子组件.js

componentWillReceiveProps(nextProps) {
  console.log(this.props.myList, '==', nextProps.myList);  // Outputs ['a','b','c'] == ['a','b','c']
}

当我试图控制 componentWillReceiveProps 中的 nextProps 时，即使在更改道具后，它每次都会给出相同的结果。