Reactjs 如何使用功能组件指定构造函数（胖箭头语法）？

鉴于这一组成部分：

import React from 'react'
import ReactDOM from 'react-dom'
import PropTypes from 'prop-types'

const NewGoalInput = props => {
  return (
    <input type="text" onKeyUp={handleKeyUp}/>
  )
}

const handleKeyUp = (e) => {
  if (e.key === "Enter") {
    // TODO Add goal
  }
}

export default NewGoalInput

从“React”导入React
从“react dom”导入react dom
从“道具类型”导入道具类型
const NewGoalInput=props=>{
返回(
)
}
常量handleKeyUp=（e）=>{
如果（e.key==“输入”）{
//待办事项添加目标
}
}
导出默认NewGoalInput

---

如何添加一个构造函数来定义状态，而无需使用

extends React.Component

语法？

您不需要。示例中的组件类型称为“无状态功能组件”。它没有状态，也没有生命周期方法。如果希望组件是有状态的，则必须将其作为类组件编写。

因为它是无状态组件，所以没有组件生命周期。 因此，您不能指定

构造函数

您必须扩展
React.Component
来创建一个有状态的组件，然后该组件将需要一个构造函数，您将能够使用
状态

更新
自从引入和挂钩以来，有了更多的选择

钩子是一个新的特性建议，它允许您在不编写类的情况下使用state和其他React>特性。它们在React中作为>v16.8.0的一部分发布

无状态：

import React from "react"

const Stateless = ({name}) => (
  <div>{`Hi ${name}`}</div>
);

现在我们有了
useState
和hook，答案有点过时了。我遇到这个问题是因为我做错了什么。这里有一些我正在做的简化代码

// set an initial state
const [ value, setValue ] = useState(0)

// gets called after component is re-rendered
useEffect(() => {
   // callback to parent that set props
   props.update()
})

// if we have an existing value passed in
if (props.value) {
   setValue(props.value)
}

此代码使用钩子从有状态类转换为函数，最初在构造函数中设置默认的道具-但函数没有构造函数，每次组件重新呈现时都会进行检查：

调用
useState
触发器重新渲染
使用效果被触发
将调用父级来设置道具
道具会更新，以便子对象再次渲染
转到1
正如您所看到的，这将导致无限循环。解决办法其实很简单。这是一个与原作的模拟差异

- const [ value, setValue ] = useState(0)
+ const [ value, setValue ] = useState(props.value || 0)

- if (props.value) {
-   setValue(props.value)
- }

基本上，只需从道具中初始化状态，除了响应某个事件或某种类型的回调之外，不要做一些愚蠢的事情，比如调用
useState
。
在FC use-useffect中模拟构造函数

useEffect(() => {
  ... here your init code
}, []);

就这样！简单当组件加载时，此useEffect只运行一次，以后不会运行，只是不要忘记在末尾添加方括号。
您可以将useState设置为功能组件内的第一行，并将函数添加为“初始值”：

const MyComponentName=props=>{
useState（（）=>{
log（'这将在组件第一次呈现时运行！'）；
});
返回我的组件！；
};
您可以使用
usemo
hook（如下所示）作为功能组件的构造函数进行演示。有人建议使用
useffect
，但它将在渲染后被调用

useMemo(() => {
  console.log('This is useMemo')
}, []);

功能组件没有实现生命周期工作流，尽管它们没有状态。如果希望使用状态，则必须从
React.Component
扩展，谢谢！useffect钩子在render函数之后运行，因此即使传递第二个参数（“方括号”），它们也不能作为构造函数提供相同的函数。类组件中的构造函数甚至在第一个呈现callTimofey正确之前运行。useEffect（）不模拟componentDidMount，而不是构造函数。您不能使用它来设置应该在以后呈现的初始数据，就像在基于类的构造函数中一样。如果您需要将“构造函数”中的任何值公开给组件，请记住从该函数返回的值是
useState
返回的数组中的第一项，这样：
const[value]=useState（（）=>{/*…*/return'123'；}）
useEffect(() => {
  ... here your init code
}, []);

const MyComponentName = props => {
  useState(() => {
    console.log('this will run the first time the component renders!');
  });
  return <div>my component!</div>;
};

useMemo(() => {
  console.log('This is useMemo')
}, []);