随着 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 datathis.state = { name: "Chris1993" };// update state datathis.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类型；
// ClassComponentinterface AppProps { value: string;}interface AppState { count: number;}class App extends React.Component<AppProps, AppStore> { // ...}// FunctionComponentinterface 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?
如果您感觉本文不错，欢送点赞评论关注，您的反对是我分享的最大能源。