鉴于此组件：
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
如何在不使用extends React.Component语法的情况下添加可以定义状态的构造函数？
由于它是一个无状态组件，它没有组件生命周期。因此你不能指定一个constructor.
您必须扩展React.Component以创建一个有状态组件，然后该组件将需要一个构造函数，并且您将能够使用state.
更新 自从React 16.8.0和 Hooks 被引入以来，有更多的选择。
Hooks 是一个新的特性提案，它可以让你在不编写类的情况下使用状态和其他 React > 特性。它们作为 > v16.8.0 的一部分在 React 中发布
无国籍：
import React from "react"
const Stateless = ({name}) => (
<div>{`Hi ${name}`}</div>
);
有状态：
可以访问组件生命周期方法和本地状态。
class Stateful extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
}
componentDidMount() {
const { count } = this.state;
document.title = `You've clicked ${count} times.`;
}
componentDidUpdate() {
const { count } = this.state;
document.title = `You've clicked ${count} times.`;
}
render() {
const { count } = this.state;
return (
<div>
<p>You've clicked {count} times.</p>
<button onClick={() => this.setState({ count: count + 1 })}>
Click me
</button>
</div>
);
}
}
使用钩子：
能够使用State Hook和Effect Hook。
如果您熟悉 React 类的生命周期方法，您可以将 useEffect Hook 视为 componentDidMount、componentDidUpdate 和 componentWillUnmount 的组合。
import React, { useState, useEffect } from "react";
const UsingHooks = () => {
const [count, setCount] = useState(0);
// Similar to componentDidMount and componentDidUpdate:
useEffect(() => {
// Update the document title using the browser API
document.title = `You've clicked ${count} times.`;
});
return (
// <> is a short syntax for <React.Fragment> and can be used instead of a wrapping div
<>
<p>You've clicked {count} times.</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</>
);
}
现在我们有了useState和钩子的答案有点过时了。我遇到这个问题是因为我做错了什么。这是我正在做的一些简化代码。
// 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)
}
这段代码使用钩子从有状态类转换为函数，最初在构造函数中设置默认props - 但函数没有构造函数，每次组件重新渲染时都会进行检查：
useState如您所见，这会导致无限循环。解决方案真的很简单。这是与原始版本的模拟差异。
- const [ value, setValue ] = useState(0)
+ const [ value, setValue ] = useState(props.value || 0)
- if (props.value) {
- setValue(props.value)
- }
基本上，只需从 props 初始化状态，不要做愚蠢的事情，比如调用，useState除非响应某种类型的事件或回调。
您可以将 useState 设置为功能组件内的第一行，并添加一个函数作为“初始值”：
const MyComponentName = props => {
useState(() => {
console.log('this will run the first time the component renders!');
});
return <div>my component!</div>;
};
你没有。您示例中的组件类型称为“无状态功能组件”。它没有状态，也没有生命周期方法。如果您希望组件有状态，则必须将其编写为类组件。
要模拟 FC 中的构造函数，请使用 useEffect。
useEffect(() => {
... here your init code
}, []);
而已！EZ！这个 useEffect 在组件加载时只运行一次，之后再也不运行，只是不要忘记在最后添加方括号。