标签: react-hooks

因此，React 16.8中提供了挂钩。从他们的文档来看，Hooks可以作为功能组件中状态的替代者。基本挂钩是：useState，useEffect，useContext，但也有一些额外的钩子，其和为之一useReducer，它看起来像它使用相同的action-dispatch的终极版做架构。

问题是，是否由于相似而取代Redux？

是否更适合特定项目？

它适合哪里？

我想知道useMemohook 是否会收到它所记忆的任何先前值作为其回调的任何参数？

我有一个看起来像这样的组件：

const MyComponent = props => {
  const { checked, onChange, id } = props;
  const [isChecked, setChecked] = useState(false);

  useEffect(() => {
    onChange && onChange({ isChecked: !!checked, id });
    setChecked(checked);
  }, [checked]);

  const childProps = {
    id,
    isChecked
  };

  return <ChildComponent {...childProps} />;
};

详尽的 deps lint 规则并不令人满意：

React Hook useEffect 缺少依赖项：id和onChange. 包括它们或删除依赖项数组。(react-hooks/exhaustive-deps)eslint

我知道这一点id并且onChange不会改变，因此将它们添加到依赖项数组似乎没有必要。但规则不是警告，而是明确的指示去做某事。

是 ESLint 规则：

1）在这种情况下过于谨慎和有点愚蠢，所以可以忽略吗？

2) 突出最佳实践——即最大限度地减少将来可能发生的意外错误，例如，如果父组件的更改意味着 id将在将来的某个时候更改？

3) 显示当前代码的实际/可能问题？

我定义了一个场景：我们有一个使用父级道具和自身状态的组件。

有两个组件 DC 和 JOKER 以及我在下面的步骤：

1. 单击 DC 的按钮
2. DC 设置计数
3. JOKER 将使用旧状态进行渲染
4. 运行 useEffect 和 setCount
5. JOKER 再次渲染

我想问一下为什么 JOKER 渲染两次（第 3 步和第 5 步），而第一个渲染浪费了性能。我只是不想要第 3 步。如果在类组件中，我可以使用 componentShouldUpdate 来避免它。但是 Hooks 有同样的东西吗？

我的代码在下面，或者打开这个网站https://jsfiddle.net/stephenkingsley/sw5qnjg7/

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

function JOKER(props) {
  const [count, setCount] = useState(props.count);
  useEffect(() => {
    console.log('I am JOKER\'s useEffect--->', props.count);
    setCount(props.count);
  }, [props.count]);

  console.log('I am JOKER\'s  render-->', count);
  return (
    <div>
      <p style={{ color: 'red' }}>JOKER: You clicked …

我试图深入了解useEffect钩子。

我想知道何时使用哪种方法以及为什么？

1.useEffect with no second paraments
 useEffect(()=>{})

2.useEffect with second paraments as []
  useEffect(()=>{},[])

3.useEffect with some arguments passed in the second parameter
 useEffect(()=>{},[arg])

将useState的初始值用作函数的情况是什么？
和仅仅传递一个值有什么区别吗？

例如

const [state, setState] = useState(() => someValue)

反应文档说：

\n

React 如何将 Hook 调用与组件关联起来？

\n\n

React 跟踪当前渲染的组件。由于 Hook 规则，我们知道 Hook 只能从 React 组件中调用（或者自定义 Hooks\n \xe2\x80\x94 也只能从 React 组件中调用）。\n 有一个与每个组件关联的\n\n \xe2\x80\x9c 内存单元\xe2\x80\x9d 内部列表。\n 它们\xe2\x80\x99 只是 JavaScript 对象，我们可以在其中放置一些数据。当您调用像 useState() 这样的 Hook 时，它会读取当前单元格（或在第一次渲染期间初始化它），然后将指针移动到下一个单元格。这就是多个 useState() 调用各自获得独立的本地状态的方式。

\n

首先……这个“记忆细胞”是什么？我们可以自己打印出来看看它的价值吗？

其次，该函数只有一个Counter()实例（如下例所示）。<Counter />因此，如果我们在 DOM 中渲染两次，一次为 to <div id="root1">，第二次为 to <div id="root2">，函数如何Counter()知道哪个是哪个？

function Counter() {\n\n    let [count, setCount] = React.useState(0);\n\n    return (\n        <div>\n            <button onClick={() => setCount(count + 1)}> + </button>                    \n …

为了更好地学习 React、TypeScript 和 Context / Hooks，我正在制作一个简单的 Todo 应用程序。但是，使上下文所需的代码感觉很麻烦。

例如，如果我想更改一个 Todo 的内容，我必须在三个地方（ITodo 接口、默认上下文值、默认状态值）更改它。如果我想传递一些新的东西，我必须在三个地方（TodoContext、TodoContext 的默认值和 value=）这样做。有没有更好的方法来不必编写这么多代码？

import React from 'react'

export interface ITodo {
    title: string,
    body?: string,
    id: number,
    completed: boolean
}

interface TodoContext {
    todos: ITodo[],
    setTodos: React.Dispatch<React.SetStateAction<ITodo[]>>
}

export const TodoContext = React.createContext<TodoContext>({
    todos: [{title: 'loading', body: 'loading', id: 0, completed: false}],
    setTodos: () => {}
})

export const TodoContextProvider: React.FC<{}> = (props) => {
    const [todos, setTodos] = React.useState<ITodo[]>([{title: 'loading', body: 'loading', id: 0, completed: false}])

    return ( …

我使用此代码来侦听函数组件中的调整大小事件，并在调整窗口大小时重新渲染该组件。问题是，任何一个事件监听器都没有打印出任何内容，所以我认为我对这里如何使用 useEffect 有误解。

  const [dimensions, setDimensions] = React.useState({
    width: window.innerWidth,
    height: window.innerHeight,
  });

  useEffect(() => {
    const handleResize = () => {
      console.log(dimensions.width);
      setDimensions({
        width: window.innerWidth,
        height: window.innerHeight,
      });
      window.addEventListener("load", handleResize, false);
      window.addEventListener("resize", handleResize, false);
    };
  });

我需要添加一些与 React 外部的对象交互的事件处理程序（以 Google 地图为例）。在这个处理函数中，我想访问一些可以发送到这个外部对象的状态。

如果我将状态作为效果的依赖项传递，它会起作用（我可以正确访问状态），但每次状态更改时都会添加添加/删除处理程序。

如果我不将状态作为依赖项传递，则添加/删除处理程序会添加适当的次数（基本上一次），但状态永远不会更新（或更准确地说，处理程序无法提取最新状态） 。

代码笔示例：

也许最好用 Codepen 来解释： https ://codepen.io/cjke/pen/dyMbMYr?editors=0010

const App = () => {
  const [n, setN] = React.useState(0);

  React.useEffect(() => {
    const os = document.getElementById('outside-react')
    const handleMouseOver = () => {
      // I know innerHTML isn't "react" - this is an example of interacting with an element outside of React
      os.innerHTML = `N=${n}`
    }
    
    console.log('Add handler')
    os.addEventListener('mouseover', handleMouseOver)
    
    return () => {
      console.log('Remove handler')
      os.removeEventListener('mouseover', handleMouseOver)
    }
  }, []) // <-- …