Question

说我有一个我想使用钩子转换为React类的组件

class Something extends React.Component {
    constructor(){
    }

    componentDidMount(){}

    handleSubmit(){}

    changeSomethingElse(){}

    render(){}
}

我知道我可以为useEffect和componentDidMount使用render，并且可以为组件状态使用useState，但是我在班级{{ 1}}在这种情况下，它是否仍可以作为函数存在于我的新函数组件中，还是需要将其提取到其他地方？

Answer 1

是的

const Something = props => {

  // constructor(){}
  useEffect( () => {      
  }, [])

  // componentDidMount(){}
  useLayoutEffect( () => {      
  }, [])

  // handleSubmit(){}
  const handleSubmit = event => {
  }

  // changeSomethingElse(){}
  const changeSomethingElse = () =>{
  }

  // render() {}
  return (

  )
}

Answer 2

在大多数情况下，将它们提取到其他位置。实际上，我认为它们几乎绝对不应该成为班级的一部分，并且存在它们的唯一原因是因为this使您可以方便地访问道具和状态。但是这种便利是有代价的。您作为示例提供的课程似乎有以下问题：

在挂载上运行一些逻辑（获取请求？）
处理表单提交（POST数据？）
ChangeSomethingElse（状态更新？）
渲染东西。

对于单个React组件来说，很多。尽管我确实看到了很多类似的React组件，但它们将很多单独的问题混为一谈。功能组件的优点之一是它们很难做到这一点，而类却使它变得如此简单。粗略翻译为功能组件：

// easily tested with fetch mocked out, you do
// have to manually pass in data since you don't
// have `this` to get props and state from
const getData = () => {};
const handleSubmit = (evt, data) => {};

const MyComponent = (props) => {
  const [data, setData] = useState();
  const [somethingElse, changeSomethingElse] = useState();

  // Runs once, on mount
  useEffect(() => {
    getData().then(resp => resp.json()).then(setData);
  }, []);

  return data
    ? <props.RenderComponent data={data} onClick={changeSomethingElse} />
    : <props.LoadingComponent />;
};

此组件负责状态，并将该状态传递给纯子级进行渲染。如果没有理由让它们放在最上面的那些函数甚至不必放在同一文件中（与类示例不同）。您甚至可以选择将其拆分为2-3个组件，将两个useState调用和有条件的LoadingComponent渲染分开，但这可能是过大了。

Answer 3

通常，类组件中的其他函数将是使状态发生变化的回调函数。它们将作为事件回调（onClick，onChange等）传递或在计时器中使用。

在函数组件中使用钩子时，会将其作为本地函数。
如果它们使用闭包中的状态变量，例如setCounter(counter + 1)，则需要使用useCallback创建它们，例如：

const incrCounter = useCallback(() => setCounter(counter + 1))

或者，您可以为setXXX使用函数类型param，在这种情况下，您可以将它们声明为普通的本地函数：

const incrConter = () => setCount(counter => counter + 1)

如果您在类组件中具有其他属性，则可以使用useRef钩子来设置它们。

Answer 4

我认为您的关注点在于性能。您可以使用useCallback，以便在重新渲染时不会重新创建您的函数。

import React, { useCallback } from 'react'

const Someting = () => {
  const handleSubmit = useCallback(() => {}, [// you can add dependencies here so that the function will be updated with the correct values])
  const changeSomethingElse = useCallback(() => {}, [])

  return <div>do something here...</div>
}

在哪里将其他类函数放在钩子上？

4 个答案: