11ReactMisusestoAvoid
随着React越来越流行，越来越多的React开发者在开发过程中也遇到了各种各样的问题。在这篇文章中，我将结合自己的实际工作经验，总结出React开发中常见的11个错误，帮助大家避免一些错误。如果你刚开始使用React，我建议你好好看看这篇文章。如果你已经使用过React开发项目，我也建议你检查一下差距。阅读本文后，您将了解如何避免以下11个React误用：渲染列表时，直接通过赋值修改状态值，而无需使用键将状态值直接绑定到input标签的value属性直接使用状态执行setState后useState+useEffect忘记清除useEffect中的副作用时发生无限循环错误地使用布尔运算符未定义组件参数类型将字符串作为值传递给组件未以大写字母开头组件名称错误地将事件绑定到元素1。render使用列表时，不要使用键。问题描述刚开始学习React时，我们会根据文档介绍渲染一个列表，例如：constnumbers=[1,2,3,4,5];constlistItems=numbers.map((number)=>
{number});渲染完成后，控制台会提示警告??listitemsshouldbeprovidedakey。解决方法只需要按照提示给每一项添加key属性即可：constnumbers=[1,2,3,4,5];constlistItems=numbers.map((number,index)=>
{number});key帮助React识别哪些元素发生了变化，例如被添加或删除。所以我们需要为数组中的每个元素设置一个唯一的键值。文档介绍了React-基础列表组件2。通过赋值直接修改state值问题描述在React中state是不能直接赋值修改的，否则会造成难以修复的问题，所以如下写法：updateState=()=>{this.state.name="Chris1993";};这时候小编会提示警告??：不要直接mutatestate。使用设置状态（）。解决方案类组件可以通过setState()方法修改，功能组件可以使用useState()//ClassComponent:usesetState()this.setState({name:"Chris1993"});//FunctionComponent:使用useState()const[name,setName]=useState("");setName("Chris1993");文档介绍了React-State和LifecycleReact-UsingtheStateHook3。将状态值直接绑定到input标签的value属性上问题描述当我们直接将状态的值作为参数绑定到input标签的value属性上时，我们会发现，无论我们在输入框中输入什么，输入框的内容不会改变。导出默认函数App(){const[count,setCount]=useState(0);return;}这是因为我们使用state作为默认值的状态变量赋值给的值，而函数中要修改的state组件只能通过useState返回的set方法修改。所以解决方法也很简单，修改的时候使用set方法即可。解决方法是给绑定一个onChange事件，通过调用setCount修改：exportdefaultfunctionApp(){const[count,setCount]=useState(0);constchange=(val)=>setCount(val.value);return;}4.执行完setState后直接使用state问题描述当我们通过setState()修改数据的时候，会马上拿到数据，数据仍将是旧值：//初始状态datathis.state={name:"Chris1993"};//更新状态datathis.setState({name:"HelloChris1993!"});console.log(这个.state.name);//output:Chris1993我们可能认为输入的this.state.name应该是HelloChris1993!，但结果却是Chris1993。这是因为setState()是异步的。当执行setState()时，真正的update操作会被放入异步队列中执行，接下来要执行的代码（也就是console.log那行）是同步执行的，所以打印状态不是最新值。解决方法是将后续要执行的操作封装成一个函数作为setState()的第二个参数，更新完成后执行回调函数。this.setState({name:"HelloChris1993!"},()=>{console.log(this.state.name);//输出：HelloChris1993!});现在可以输出正确的内容了。5、使用useState+useEffect时出现死循环问题描述当我们在useEffect()中直接调用useState()返回的set*()方法，并且没有设置useEffect()的第二个参数时，会出现死循环：导出默认函数App(){const[count,setCount]=useState(0);useEffect(()=>{setCount(count+1);});return{count} ;}这时候可以看到页面上的数据一直在增加，并且useEffect()被无限调用，进入死循环状态。解决方案这是useEffect()的典型错误使用。useEffect()可以看作是类组件中componentDidMount、componentDidUpdate和componentWillUnmount这三个生命周期函数的组合。useEffect(effect,deps)接收2个参数：effect副作用函数；deps依赖数组。当deps数组变化时，会执行副作用函数effect。修改方法只需要在useEffect()的第二个参数中传入[]：exportdefaultfunctionApp(){const[count,setCount]=useState(0);useEffect(()=>{setCount(count+1);},[]);return
{count} ;}详解useEffect的4种情况：第二个参数不传：任何状态更新都会触发useEffect的副作用函数。useEffect(()=>{setCount(count+1);});第二个参数为空数组：只在挂载和卸载时触发useEffect的副作用函数。useEffect(()=>{setCount(count+1);},[]);第二个参数是一个单值数组：只有当值发生变化时，才会触发useEffect的副作用函数。useEffect(()=>{setCount(count+1);},[名称]);第二个参数是一个多值数组：只有当传入的值发生变化时，才会触发useEffect的副作用函数。useEffect(()=>{setCount(count+1);},[姓名,年龄]);6.useEffect忘记清理sideeffect问题描述在类组件中，我们经常使用componentWillUnmount()生命周期方法来清理一些Sideeffects，比如定时器，事件监听器等，解决方法是为useEffect()的副作用函数，类似于componentWillUnmount()生命周期方法的作用：useEffect(()=>{//其他代码return()=>clearInterval(id);},[name,age]);文档介绍了React-使用Hooks7的示例。错误使用布尔运算符问题描述在JSX/TSX语法中，我们经常使用布尔值来控制渲染的元素，很多时候我们使用&&运算符来处理这种逻辑：constcount=0;constComp=()=>count&&
Chris1993
;我们很自然地会认为此时页面显示的是空内容，但实际上在最上面显示的是0内容。解决的原因是falsy表达式会导致&&后面的元素被跳过，但是会返回falsy表达式的值。所以我们尽量把判断条件写的完整，不依赖JavaScript的boolean值来比较：constcount=0;constComp=()=>count>0&&
Chris1993
;该页面可以显示空内容。文档介绍了React-InlineIfwithLogical&&Operator8.没有定义组件参数类型。问题描述在团队开发中很常见。如果每个人开发的组件没有定义参数类型，很容易让合作的同事不知道如何使用组件。很麻烦，比如：constUserInfo=(props)=>{return(
{props.name}:{props.age}
);};解决方案是使用TypeScript来定义组件props类型；//ClassComponentinterfaceAppProps{value:string;}interfaceAppState{计数：数字；}classAppextendsReact.Component
{//...}//FunctionComponentinterfaceAppProps{value?:string;}constApp:React.FC=({value="",children})=>{//...};您可以使用propTypes来定义props类型，而不是使用TypeScript；constUserInfo=(props)=>{return({props.name}:{props.age}
);};UserInfo.propTypes={name:PropTypes.string.isRequired,age:PropTypes.number.isRequired,};9.把字符字符串作为值传递给组件问题描述由于React也有模板语法，和HTML很相似，所以经常会出现将数字作为props直接传递给组件，导致意想不到的值判断：/MyComp>在MyComp组件中传入props.count===99会返回false。正确的解决方法应该是用大括号来传递参数：10.没有大写字母ComponentNamesattheBeginning问题描述对于新手来说，忘记以大写字母开头的componentnames是一个常见问题。JSX/TSX中以小写字母开头的组件会被编译成HTML元素，比如就是HTML标签。classmyComponentextendsReact.component{}解决办法就是把第一个字母改成大写：classMyComponentextendsReact.component{}文档介绍React-RenderingaComponent11.错误的元素绑定事件问题描述import{Component}from"react";exportdefaultclassHelloComponentextendsComponent{constructor(){super();this.state={name:"Chris1993",};}update(){this.setState({name:"HelloChris1993!"});}render(){return(update
);}}当点击更新按钮时，控制台会报错：Cannotreadpropertiesofundefined(reading'setState');this.state={name:"Chris1993"};this在构造函数中.update=this.update.bind(this);}使用箭头函数update=()=>{this.setState({name:"HelloChris1993!"});};bindinrenderfunction（不推荐，每次渲染组件都要新建一个函数，影响性能）update在render函数中使用箭头函数（不推荐，每次渲染组件都要新建一个函数，影响性能）this.update()}>update文档介绍React-如何将事件处理程序（如onClick）传递给组件？如果觉得这篇文章不错，请点赞、评论、关注。您的支持是我分享的最大动力
