小编D P*_*ark的帖子

我有一个名为的函数onRemove，其写法如下：

const [todos, setTodos] = useState(todoData);

const onRemove = useCallback(
    (id) => {
      setTodos(todos.filter((todo) => todo.id !== id));
    },
    [todos]
  );

然后我注意到改变它的功能会导致渲染时间缩短。

const onRemove = useCallback(
    (id) => {
      setTodos(todos => todos.filter((todo) => todo.id !== id));
    },
    []
  );

我的问题是：

1. 为什么它渲染组件的速度更快？
2. 使用函数式还有哪些其他优点setState()？

我正在构建一个基本的可视化系统，可以从控制框切换图层。我将layers各个图层合并为一个。

const [layers, setLayers] = useState([densityLayer, pedestrianLayer]);

我有filterState跟踪控制箱中的活动的功能。它包含图层对象作为属性linkTo

 const [filterState, setFilterState] = useState([
        {
          id: 'densityFilter',
          checked: true,
          description: 'Population density',
          linkedTo: densityLayer
        },
        {
          id: 'pedestrianFilter',      
          checked: true,
          description: 'Pedestrian volume',
          linkedTo: pedestrianLayer
        }
      ]);

每次检查属性filterState更新时，它都会启动renderLayers() ，选择checked属性为的相应图层true。

  useEffect(()=>{
        renderLayers();
      },[filterState]);

      const renderLayers = () => {
        const newLayers = []; 
        filterState.map(filter => (filter.checked && newLayers.push(filter.linkedTo)));
        setLayers(newLayers);
      }

然后作为图层道具layers传递给组件。DeckGL

   <DeckGL
        initialViewState={viewState}
        controller={true}
        layers={layers}
      >

在我的程序中，关闭图层效果很好，但它们不会重新打开。在控制台中，我注意到层之间的生命周期是不同的。我的做法有什么不正确的地方吗？

我listItem在useStyles外面定义了一个名为in 的属性，TodoListItem如下所示：

const useStyles = makeStyles(theme => ({
        listItem: {
            textDecoration: 'none'
        }
    })
)

const TodoListItem({checked}) => {
    const classes = useStyles();
    return <ListItemText className={classes.listItem} primary={text}/>
};

然后我想textDecoration根据名为 的变量更改状态checked。我尝试直接使用checked变量 inuseStyles但不起作用，因为它超出了范围。

textDecoration: checked ? 'line-through' : 'none'

在这种情况下，我应该如何将checked变量传递useStyles给三元运算符以使其工作？

我有一个.map()可以更改数组isActive中对象的属性值的函数data。然而，用大括号包裹它会返回未定义的结果，而用括号包裹它或不包裹它会返回更新后的值。大括号用作箭头函数中的包装器，但它对于 .map() 的工作方式是否有所不同？

    const newData = data.map((data) => {
      data.label === label ? { ...data, isActive: !data.isActive } : data,
    });
    console.log(newData) 
    //undefined



    const newData = data.map((data) => 
      data.label === label ? { ...data, isActive: !data.isActive } : data,
    );
    console.log(newData) 
    //returns updated newData