React Hooks 常见错误
前言
本片文章主要是在写react hooks的时候，遇到的常见错误的写法，和错误。也是一个对只是的巩固和总结。
错误一
上代码：正确写法
function TestReactHooksError() {
const [test, setTest] = useState('test');
useEffect(() => {
if(test) {
console.log(test)
}
}, [test]);
return (
<div>
<button onClick={()=>setTest(test + 1)}>{test}click</button>
</div>
);
}
export default TestReactHooksError
解析：
功能，点击按钮，按钮文案改动，并且控制台打印文案结果。
稍作改动：
function TestReactHooksError() {
const [test, setTest] = useState('test');
if (test) {
useEffect(() => {
console.log(test)
}, [test]);
}
return (
<div>
<button onClick={() => setTest(test + 1)}>{test}click</button>
</div>
);
}
export default TestReactHooksError
可以看到报错了：
搜狗翻译：
React钩子“useEffect”被有条件地调用。React挂钩必须在每个组件渲染中以完全相同的顺序调用
正常翻译：
就是钩子函数必须按顺序执行，因为底层是按顺序执行的，所以如果加入判断的话，可能有不可预知的错误。
错误二
上代码：正确写法
function TestReactHooksError() {
const [test, setTest] = useState([1, 2, 3, 4, 5]);
useEffect(() => {
consoleLog()
}, []);
const consoleLog = (value) => {
for (let i = 0, len = test.length; i < len; i++) {
console.log(test[i])
}
}
return (
<div>
{
test.map((item) => {
return <span key={item}>{item}</span>
})
}
</div>
);
}
export default TestReactHooksError
解析：
功能，渲染列表，并且控制台打印结果。
稍作改动：
function TestReactHooksError() {
const [test, setTest] = useState([1,2,3,4,5]);
for (let i=0, len = test.length; i < len; i++) {
useEffect(() => {
console.log(test[i])
}, [test[i]]);
}
return (
<div>
{
test.map((item)=>{
return <span key={item}>{item}</span>
})
}
</div>
);
}
export default TestReactHooksError
报错：
可以看到结果都正常打印了，但是报错了。
搜狗翻译：
React挂钩“useEffect”可以执行多次。可能是因为它是在循环中调用的。React挂钩必须在每个组件渲染中以完全相同的顺序调用
正常翻译：
不能在循环中使用hooks，因为还是可能会导致执行顺序错误，导致结果错误。
错误三
上代码： 正确写法
function TestReactHooksError() {
const [testState, setTestState] = useState('testState')
const clickState = () => {
console.log(testState)
}
return (
<div>
<button onClick={()=>clickState()}>click</button>
</div>
);
}
export default TestReactHooksError
解析：
功能，点击按钮控制台打印结果。
稍作改动：
function TestReactHooksError() {
const clickState = () => {
const [testState, setTestState] = useState('testState')
console.log(testState)
}
return (
<div>
<button onClick={()=>clickState()}>click</button>
</div>
);
}
export default TestReactHooksError
报错：
搜狗翻译：
React挂钩“useState”在函数“clickState”中调用，该函数既不是React函数组件，也不是自定义React挂钩函数。React组件名称必须以大写字母开头。React挂钩名称必须以单词“use”开头
正常翻译：
这个翻译的很明白，就是不能在普通函数中使用，因为react不会理解它是一个组件或者是自定义hooks。
错误四
上代码： 错误写法
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
testState: 'testState',
};
}
useEffect(() => {
console.log(this.state.testState)
}, [this.state.testState]);
render() {
return (
<div>
<p>You clicked {this.state.testState} times</p>
<button onClick={() => this.setState({ testState: this.state.testState + 1 })}>
Click
</button>
</div>
);
}
}
报错：
报错语法格式错误。所以不能混合使用
错误五
正确的写法：
function TestReactHooksError() {
const [testState, setTestState] = useState('testState')
function clickState() {
console.log(testState)
}
return (
<div>
<button onClick={() => setTestState(testState + 1)}>{testState}</button>
<button onClick={() => clickState()}>click</button>
</div>
);
}
export default TestReactHooksError
稍作修改：
function TestReactHooksError() {
const [testState, setTestState] = useState('testState')
function clickState() {
console.log(testState)
}
return (
<div>
<button onClick={() => setTestState(testState + 1)}>{testState}</button>
<button onClick={clickState}>click</button>
</div>
);
}
export default TestReactHooksError
在 JSX 的事件处理程序中调用函数时，应该传递函数本身而不是函数的返回值。改为 onClick={() => handleClick()} 或者将 handleClick 函数定义在组件外部并将其作为 prop 传递给组件。由于当前的写法每次渲染都会创建一个新的函数和事件处理程序，因此会导致浪费和性能问题。
注意：
当然在最新的版本中不会有这个问题因为，React 已经对函数事件处理程序进行了自动绑定，所以在最新版本中不会出现这个问题。这是因为最新版本的 React 使用了异步渲染机制，将多次渲染时创建的函数缓存起来进行重用，从而避免了性能问题。
错误六
使用useEffect时没有传入依赖项，这可能会导致无限制地执行useEffect，当然如果你就是为了重复执行可以跳过这个。
正确写法：
function TestReactHooksError() {
const [test, setTest] = useState('test');
useEffect(() => {
console.log(test)
}, [test]);
return (
<div>
<button onClick={()=>setTest(test + 1)}>{test}click</button>
</div>
);
}
export default TestReactHooksError
稍作修改：
function TestReactHooksError() {
const [test, setTest] = useState('test');
useEffect(() => {
console.log(test)
});
return (
<div>
<button onClick={()=>setTest(test + 1)}>{test}click</button>
</div>
);
}
export default TestReactHooksError
修改之后，如果之后再加入其他按钮渲染数据，当其他数据变化时，还是会执行useEffect，所以需要正确的添加，依赖项。
错误七
定时器
上代码：正确的写法
分别使用setTimeout和setInterval
function TestReactHooksError() {
const [timer, setTimer] = useState(0);
const [timerS, setTimerS] = useState(0);
useEffect(() => {
setTimeout(() => {
setTimer(timer + 1)
}, 1000)
}, [timer]);
useEffect(() => {
setInterval(() => {
setTimerS(timerS => timerS + 1)
}, 1000)
}, []);
return (
<div>
{timer}-{timerS}
</div>
);
}
export default TestReactHooksError
但是这样写有一个问题，如果仔细看页面计时显示会发现两个时间有偏差。setTimeout会慢一些，但是这也不难分析，因为setTimeout 和 setInterval 的执行方式是不同的。setTimeout 在每次计时器更新时都会重新创建一个新的计时器，而 setInterval 只会在组件挂载时创建一个计时器。因此，setInterval 的计时器会一直运行，而 setTimeout 的计时器则会受到上一个计时器执行时间的影响，可能会出现延迟。另外，由于 setTimeout 是在依赖数组中的 timer 更新时执行的，当 timer 发生变化时，会重新创建一个新的计时器，这可能会导致计时器的执行时间出现偏差。
说简单点就是，setInterval 每次只是在设定的时间后马上执行，而setTimeout需要依赖数据变化并且每次都重新创建，所以会慢一些
稍作修改
错误的写法：
useEffect(() => {
setInterval(() => {
setTimerS(timerS + 1)
console.log(timerS)
}, 1000)
}, [timerS]);
可以看到页面显示抽搐的时间
总结
先这么多文章还会更新。。。
如有问题欢迎指出，感谢
