共计 5666 个字符，预计需要花费 15 分钟才能阅读完成。
随着 React 越来越受欢迎，React 开发者也越来越多，在开发过程中也遇到各种各样的问题。
本文我将联合本人理论工作教训，总结 11 个 React 开发中常见的一些谬误，帮忙您防止一些谬误的产生。
如果您刚开始应用 React，那倡议这边文章你要好好看一下，如果您曾经应用过 React 开发我的项目，也建议您能查缺补漏一下。
浏览完本文，您将学习如何防止上面这 11 个 React 谬误用法：
- 渲染列表时，不应用 key
- 间接通过赋值形式批改 state 值
- 将 state 值间接绑定到 input 标签的 value 属性
- 执行 setState 后间接应用 state
- 应用 useState + useEffect 时呈现有限循环
- 遗记在 useEffect 中清理副作用
- 谬误的应用布尔运算符
- 没有定义组件参数类型
- 把字符串当做数值传递到组件
- 没有以大写字母结尾的组件名称
- 谬误的为元素绑定事件
1. 渲染列表时，不应用 key
问题形容
在刚学 React 时，咱们会依据文档介绍的形式来渲染一个列表，比方：
const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) => <li>{number}</li>);当渲染当前，控制台会提醒正告 ⚠️ a key should be provided for list items。
解决办法
你只须要依照提醒，为每一项增加 key属性即可：
const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number, index) => <li key={index}>{number}</li>);key 帮忙 React 辨认哪些元素扭转了，比方被增加或删除。所以咱们须要给数组中的每一个元素设置一个惟一的 key值。
文档介绍
React – Basic List Component
2. 间接通过赋值形式批改 state 值
问题形容
在 React 中，state 时不能间接赋值批改，否则会导致难以修复的问题，因而上面的写法：
updateState = () => {this.state.name = "Chris1993";};此时编辑器会提醒正告 ⚠️：
Do not mutate state directly. Use setState().解决办法
类组件能够通过 setState()办法批改，函数组件应用 useState()即可：
// ClassComponent：use setState()
this.setState({name: "Chris1993"});
// FunctionConponent：use useState()
const [name, setName] = useState("");
setName("Chris1993");文档介绍
React – State and Lifecycle
React – Using the State Hook
3. 将 state 值间接绑定到 input 标签的 value 属性
问题形容
当咱们间接将 state的值作为参数绑定到 input标签的 value属性上，咱们会发现，无论咱们在输入框输出什么内容，输入框内容都不会发生变化。
export default function App() {const [count, setCount] = useState(0);
return <input type="text" value={count} />;
}这是因为咱们是应用带状态的 state 变量作为默认值赋值给 <input>的 value，而函数式组件中要批改 state的只能通过 useState 返回的 set办法批改。所以解决的方法也很简略，只有批改的时候应用对于 set办法即可。
解决办法
只须要为 <input>绑定一个 onChange事件，通过调用 setCount实现批改：
export default function App() {const [count, setCount] = useState(0);
const change = (val) => setCount(val.value);
return <input type="text" value={count} onChange={change} />;
}4. 执行 setState 后间接应用 state
问题形容
当咱们通过 setState()批改完数据，马上获取该数据，会呈现数据还是旧值的状况：
// init state data
this.state = {name: "Chris1993"};
// update state data
this.setState({name: "Hello Chris1993!"});
console.log(this.state.name); // output: Chris1993咱们可能会认为这时候输出的 this.state.name应该是 Hello Chris1993!，但后果却是 Chris1993。
这是因为 setState()是异步的，当执行 setState()时，会把真正的更新操作放到异步队列中去执行，而接下来要执行的代码（即 console.log 这一行）是同步执行的，所以打印进去的 state不是最新值。
解决办法
只须要将要执行的后续操作封装成函数，作为 setState()第二个参数，该回调函数会在更新实现后执行。
this.setState({name: "Hello Chris1993!"}, () => {console.log(this.state.name); // output: Hello Chris1993!
});当初就能够输入正确的内容了。
5. 应用 useState + useEffect 时呈现有限循环
问题形容
当咱们在 useEffect()中间接调用 useState()返回的 set*()办法，并且没有设置 useEffect()第二个参数时，会发现呈现死循环了：
export default function App() {const [count, setCount] = useState(0);
useEffect(() => {setCount(count + 1);
});
return <div className="App">{count}</div>;
}这时能够看到页面上数据始终减少，useEffect()被有限调用了，进入死循环状态。
解决办法
这是典型的 useEffect()应用谬误的问题，useEffect()能够看做是类组件中 componentDidMount，componentDidUpdate 和 componentWillUnmount 这三个生命周期函数的组合。useEffect(effect, deps) 接管 2 个参数：
effect副作用函数；deps依赖项数组。
当 deps数组发生变化，副作用函数 effect就会执行。
批改办法只须要在 useEffect()第二个参数传入 []即可：
export default function App() {const [count, setCount] = useState(0);
useEffect(() => {setCount(count + 1);
}, []);
return <div className="App">{count}</div>;
}具体再解释一下 useEffect 应用的 4 种状况：
- 第二个参数不传 ：任何状态更新，都会触发
useEffect的副作用函数。
useEffect(() => {setCount(count + 1);
});- 第二个参数为空数组 ：仅在挂载和卸载的时触发
useEffect的副作用函数。
useEffect(() => {setCount(count + 1);
}, []);- 第二个参数为单值数组 ：仅在该值变动，才会触发
useEffect的副作用函数。
useEffect(() => {setCount(count + 1);
}, [name]);- 第二个参数为多值数组 ：仅在传入的值发生变化，才会触发
useEffect的副作用函数。
useEffect(() => {setCount(count + 1);
}, [name, age]);6. 遗记在 useEffect 中清理副作用
问题形容
咱们在类组件中，常常应用 componentDidMount() 生命周期办法去清理一些副作用，比方定时器、事件监听等。
解决办法
能够为 useEffect()的副作用函数设置返回函数，该函数相似 componentDidMount() 生命周期办法的作用：
useEffect(() => {
// Other Code
return () => clearInterval(id);
}, [name, age]);文档介绍
React – Example Using Hooks
7. 谬误的应用布尔运算符
问题形容
在 JSX/TSX 语法中，咱们常常通过布尔值来管制渲染的元素，很多状况咱们会应用 &&运算符来解决这种逻辑：
const count = 0;
const Comp = () => count && <h1>Chris1993</h1>;咱们会很天然的认为这时候页面显示的是空内容，但理论却显示了 0的内容在下面。
解决办法
起因是因为 falsy 表达式会使 && 前面的元素被跳过，但会返回 falsy 表达式的值。所以咱们尽量要把判断条件写残缺，不依赖 JavaScript 的布尔值虚实来比拟：
const count = 0;
const Comp = () => count > 0 && <h1>Chris1993</h1>;页面就能显示空内容了。
文档介绍
React – Inline If with Logical && Operator
8. 没有定义组件参数类型
问题形容
对于团队开发常见，每个人开发的组件如果没有定义好参数类型，就很容易呈现配合的共事不晓得如何应用组件，这就很麻烦了，比方：
const UserInfo = (props) => {
return (
<div>
{props.name} : {props.age}
</div>
);
};解决办法
解决办法有
- 应用 TypeScript，定义组件
props类型；
// ClassComponent
interface AppProps {value: string;}
interface AppState {count: number;}
class App extends React.Component<AppProps, AppStore> {// ...}
// FunctionComponent
interface AppProps {value?: string;}
const App: React.FC<AppProps> = ({value = "", children}) => {//...};- 不应用 TypeScript，能够应用
propTypes定义props类型；
const UserInfo = (props) => {
return (
<div>
{props.name} : {props.age}
</div>
);
};
UserInfo.propTypes = {
name: PropTypes.string.isRequired,
age: PropTypes.number.isRequired,
};9. 把字符串当做数值传递到组件
问题形容
因为 React 也有模版语法，跟 HTML 十分相似，所以经常出现将数字间接作为 props 传给组件，导致取值判断的时候不合乎预期：
<MyComp count="99"></MyComp>在 MyComp组件中通过 props.count === 99就会返回 false。
解决办法
正确的做法应该是用大括号来传参：
<MyComp count={99}></MyComp>10. 没有以大写字母结尾的组件名称
问题形容
对于老手而言，遗记应用大写字母结尾作为组件名的问题很常见。在 JSX/TSX 中以小写字母结尾的组件会被编译成 HTML 元素，比方 <div /> 示意 HTML 标签。
class myComponent extends React.component {}解决办法
只有把首字母改为大写即可：
class MyComponent extends React.component {}文档介绍
React – Rendering a Component
11. 谬误的为元素绑定事件
问题形容
import {Component} from "react";
export default class HelloComponent extends Component {constructor() {super();
this.state = {name: "Chris1993",};
}
update() {this.setState({ name: "Hello Chris1993!"});
}
render() {
return (
<div>
<button onClick={this.update}>update</button>
</div>
);
}
}当点击 update按钮时，控制台会报错：
Cannot read properties of undefined (reading 'setState')解决办法
这是因为 this指向问题，解决办法有以下几种：
- 在构造函数中绑定
constructor() {super();
this.state = {name: "Chris1993"};
this.update = this.update.bind(this);
}- 应用箭头函数
update = () => {this.setState({ name: "Hello Chris1993!"});
};- 在 render 函数中绑定（不倡议，每次组件渲染创立一个新函数，影响性能）
<button onClick={this.update.bind(this)}>update</button>- 在 render 函数中应用箭头函数（不倡议，每次组件渲染创立一个新函数，影响性能）
<button onClick={() => this.update()}>update</button>文档介绍
React – How do I pass an event handler (like onClick) to a component?
如果您感觉本文不错，欢送点赞评论关注，您的反对是我分享的最大能源。
