编辑： 随着Hooks 的引入，可以实现生命周期类型的行为以及功能组件中的状态。目前
Hooks 是一项新功能提案，可让您使用状态和其他
无需编写类即可反应特性。它们作为 v16.8.0
的一部分在 React 中发布
useEffect 钩子可用于复制生命周期行为，useState 可用于在函数组件中存储状态。
基本语法：
useEffect(callbackFunction, [dependentProps]) => cleanupFunction
你可以用钩子来实现你的用例
const grid = (props) => {
console.log(props);
let {skuRules} = props;
useEffect(() => {
if(!props.fetched) {
props.fetchRules();
}
console.log('mount it!');
}, []); // passing an empty array as second argument triggers the callback in useEffect only after the initial render thus replicating `componentDidMount` lifecycle behaviour
return(
<Content title="Promotions" breadcrumbs={breadcrumbs} fetched={skuRules.fetched}>
<Box title="Sku Promotion">
<ActionButtons buttons={actionButtons} />
<SkuRuleGrid
data={skuRules.payload}
fetch={props.fetchSkuRules}
/>
</Box>
</Content>
)
}
useEffect 还可以返回一个函数，该函数将在组件卸载时运行。这可用于取消订阅侦听器，复制 componentWillUnmount 的行为：
例如：componentWillUnmount
useEffect(() => {
window.addEventListener('unhandledRejection', handler);
return () => {
window.removeEventListener('unhandledRejection', handler);
}
}, [])
要使useEffect 以特定事件为条件，您可以为其提供一组值以检查更改：
例如：componentDidUpdate
componentDidUpdate(prevProps, prevState) {
const { counter } = this.props;
if (this.props.counter !== prevState.counter) {
// some action here
}
}
钩子等效
useEffect(() => {
// action here
}, [props.counter]); // checks for changes in the values in this array
如果您包含此数组，请确保包含组件范围中随时间变化的所有值（道具、状态），否则您最终可能会引用以前渲染中的值。
使用useEffect 有一些微妙之处；查看 API Here。
v16.7.0 之前
函数组件的属性是它们无法访问 Reacts 生命周期函数或 this 关键字。如果要使用生命周期功能，则需要扩展React.Component 类。
class Grid extends React.Component {
constructor(props) {
super(props)
}
componentDidMount () {
if(!this.props.fetched) {
this.props.fetchRules();
}
console.log('mount it!');
}
render() {
return(
<Content title="Promotions" breadcrumbs={breadcrumbs} fetched={skuRules.fetched}>
<Box title="Sku Promotion">
<ActionButtons buttons={actionButtons} />
<SkuRuleGrid
data={skuRules.payload}
fetch={props.fetchSkuRules}
/>
</Box>
</Content>
)
}
}
当你只想渲染你的组件而不需要额外的逻辑时，函数组件很有用。