温州建设信息网站,四川宜宾今天最新消息,wordpress 文库插件,信息无障碍 网站建设React Hooks 常见错误
前言
本片文章主要是在写react hooks的时候#xff0c;遇到的常见错误的写法#xff0c;和错误。也是一个对只是的巩固和总结。 错误一
上代码#xff1a;正确写法
function TestReactHooksError() {const [test, setTest] useState(test);useEff…React Hooks 常见错误
前言
本片文章主要是在写react hooks的时候遇到的常见错误的写法和错误。也是一个对只是的巩固和总结。 错误一
上代码正确写法
function TestReactHooksError() {const [test, setTest] useState(test);useEffect(() {if(test) {console.log(test)}}, [test]);return (divbutton 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 (divbutton 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 i0, 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 (divbutton onClick{()clickState()}click/button/div);
}
export default TestReactHooksError解析 功能点击按钮控制台打印结果。 稍作改动
function TestReactHooksError() {const clickState () {const [testState, setTestState] useState(testState)console.log(testState)}return (divbutton 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 (divpYou clicked {this.state.testState} times/pbutton onClick{() this.setState({ testState: this.state.testState 1 })}Click/button/div);}
}报错 报错语法格式错误。所以不能混合使用 错误五
正确的写法
function TestReactHooksError() {const [testState, setTestState] useState(testState)function clickState() {console.log(testState)}return (divbutton onClick{() setTestState(testState 1)}{testState}/buttonbutton onClick{() clickState()}click/button/div);
}
export default TestReactHooksError稍作修改
function TestReactHooksError() {const [testState, setTestState] useState(testState)function clickState() {console.log(testState)}return (divbutton onClick{() setTestState(testState 1)}{testState}/buttonbutton 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 (divbutton onClick{()setTest(test 1)}{test}click/button/div);
}
export default TestReactHooksError稍作修改
function TestReactHooksError() {const [test, setTest] useState(test);useEffect(() {console.log(test)});return (divbutton 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]);可以看到页面显示抽搐的时间
总结
先这么多文章还会更新。。。 如有问题欢迎指出感谢
