干净的该学代码不仅仅是工作代码。简洁的技巧代码易于阅读，易于理解并且井井有条。该学在本文中，技巧我们将研究六种编写更简洁的该学React代码的香港云服务器方法。 在阅读这些建议时，技巧请务必记住它们的该学实质：相信这些实践对我们编写自己的React代码很有帮助。让我们一起学习吧! 1.仅针对一种条件渲染 如果你要为某个条件成立时渲染某些元素，技巧请不要使用三元运算符。该学请改用&&运算符。服务器托管技巧 不推荐写法： import React,该学 { useState } from react export const ConditionalRenderingWhenTrueBad = () => { const [showConditionalText, setShowConditionalText] = useState(false) const handleClick = () => setShowConditionalText(showConditionalText => !showConditionalText) return ( <div> <button onClick={handleClick}>切换文本</button> {showConditionalText ? <p>成立显示内容</p> : null} </div> ) } 推荐写法： import React, { useState } from react export const ConditionalRenderingWhenTrueGood = () => { const [showConditionalText, setShowConditionalText] = useState(false) const handleClick = () => setShowConditionalText(showConditionalText => !showConditionalText) return ( <div> <button onClick={handleClick}>切换文本</button> {showConditionalText && <p>成立显示内容!</p>} </div> ) } 2.Boolean Props简写 isHungry处简写了 不推荐写法： import React from react const HungryMessage = ({ isHungry }) => ( <span>{isHungry ? I am hungry : I am full}</span> ) export const BooleanPropBad = () => ( <div> <HungryMessage isHungry={true} /> <HungryMessage isHungry={false} /> </div> ) 推荐写法： import React from react const HungryMessage = ({ isHungry }) => ( <span>{isHungry ? I am hungry : I am full}</span> ) export const BooleanPropGood = () => ( <div> <HungryMessage isHungry /> <HungryMessage isHungry={false} /> </div> ) 3.String Props简写 personName处简写了 不推荐写法： import React from react const Greeting = ({ personName }) => <p>Hi, {personName}!</p> export const StringPropValuesBad = () => ( <div> <Greeting personName={"John"} /> <Greeting personName={Matt} /> <Greeting personName={`Paul`} /> </div> ) 推荐写法： import React from react const Greeting = ({ personName }) => <p>Hi, {personName}!</p> export const StringPropValuesGood = () => ( <div> <Greeting personName="John" /> <Greeting personName="Matt" /> <Greeting personName="Paul" /> </div> ) 4.事件处理函数简写 onChange处简写了 不推荐写法： import React, { useState } from react export const UnnecessaryAnonymousFunctionsBad = () => { const [inputValue, setInputValue] = useState() const handleChange = e => { setInputValue(e.target.value) } return ( <> <label htmlFor="name">Name: </label> <input id="name" value={inputValue} onChange={e => handleChange(e)} /> </> ) } 推荐写法： import React, { useState } from react export const UnnecessaryAnonymousFunctionsGood = () => { const [inputValue, setInputValue] = useState() const handleChange = e => { setInputValue(e.target.value) } return ( <> <label htmlFor="name">Name: </label> <input id="name" value={inputValue} onChange={handleChange} /> </> ) } 5.组件作为参数返回 IconComponent处简写了 不推荐写法： import React from react const CircleIcon = () => ( <svg height="100" width="100"> <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /> </svg> ) const ComponentThatAcceptsAnIcon = ({ IconComponent }) => ( <div> <IconComponent /> </div> ) export const UnnecessaryAnonymousFunctionComponentsBad = () => ( <ComponentThatAcceptsAnIcon IconComponent={() => <CircleIcon />} /> ) 推荐写法： import React from react const CircleIcon = () => ( <svg height="100" width="100"> <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /> </svg> ) const ComponentThatAcceptsAnIcon = ({ IconComponent }) => ( <div> <IconComponent /> </div> ) export const UnnecessaryAnonymousFunctionComponentsGood = () => ( <ComponentThatAcceptsAnIcon IconComponent={CircleIcon} /> ) 6.设置依赖于先前pros的pros 如果新状态依赖于先前状态，则始终将状态设置为先前状态的技巧函数。可以批处理React状态更新，该学并且不以这种方式编写更新会导致意外结果,技巧setIsDisabled处简写 不推荐写法： import React, { useState } from react export const PreviousStateBad = () => { const [isDisabled, setIsDisabled] = useState(false) const toggleButton = () => setIsDisabled(!isDisabled) const toggleButton2Times = () => { for (let i = 0; i < 2; i++) { toggleButton() } } return ( <div> <button disabled={isDisabled}> Im {isDisabled ? disabled : enabled} </button> <button onClick={toggleButton}>切换按钮状态</button> <button onClick={toggleButton2Times}>切换按钮状态2次</button> </div> ) } 推荐写法： import React, { useState } from react export const PreviousStateGood = () => { const [isDisabled, setIsDisabled] = useState(false) const toggleButton = () => setIsDisabled(isDisabled => !isDisabled) const toggleButton2Times = () => { for (let i = 0; i < 2; i++) { toggleButton() } } return ( <div> <button disabled={isDisabled}> Im {isDisabled ? disabled : enabled} </button> <button onClick={toggleButton}>切换按钮状态</button> <button onClick={toggleButton2Times}>切换按钮状态2次</button> </div> ) } 本文转载自微信公众号「前端人」，可以通过以下二维码关注。该学转载本文请联系前端人公众号。IT技术网 
|
喜欢
讨厌