Hook使用规则

只在组件最顶层调用Hook

不要在循环，条件或嵌套函数中调用 Hook， 确保总是在你的 React 函数的最顶层调用Hook。

提示：

这么做的目的是保证组件在初次渲染或者重新渲染的时候调用Hook的顺序保持一致。

xxxxxxxxxx
const [count, setCount] = useState(0);
const [color, setColor] = useState('red');
if (props.name) {
    //在条件语句中调用Hook不能确保每次渲染都调用该hook或者不调用该hook,所以没法保证整个组件所有hook的调用顺序每次都一致
    const [name, setName] = useState(props.name)
}

xxxxxxxxxx
if (props.name) {
    // const [name, setName] = useState(props.name)
    useEffect(()=>{
        const name=props.name;
    })
}

xxxxxxxxxx
const onClick=()=>{
    //在函数当中也不能调用hook
    const [name, setName] = useState(props.name)
}
return (
    <div>
        <button onClick={onClick}>点击</button>
    </div>
);

提示：

eslint-plugin-react-hooks 的 ESLint 插件会检测hook的使用规则。

此插件默认已添加到Create React App工具包中。

实时效果反馈

1. 可以在__调用Hook:

A 事件处理函数中

B 条件语句中

C 循环语句中

D 组件顶层

答案

1=>D