Javascript 什么'；这是在React.Js中生成条件的最佳方法

最近，我一直在关注react js的教程，我看到导师到处都写他的if条件，当我确实喜欢他的时候，解释器抛出了一个错误，特别是在功能组件中，我将展示导师代码，它向我展示了一个错误，然后我如何修复它

import {React , useEffect, useState} from 'react';

const Validation = (props) =>{

let [msg,changemsg] = useState('');

    if(props.text.length === 0){
        changemsg('');
    }else if(props.text.length < 5){
        changemsg('too short');
    }else{
        changemsg('good');
    }

return (
   <div>
    <h1>{msg}</h1>
   </div>
  );
}

export default Validation;

从“React”导入{React，useffect，useState}；
常量验证=（道具）=>{
let[msg，changemsg]=useState（“”）；
如果（props.text.length==0）{
changemsg（“”）；
}否则如果（props.text.length<5）{
changemsg（‘太短’）；
}否则{
changemsg（“好”）；
}
返回(
{msg}
);
}
导出默认验证；

下面是我如何修复它的

import {React , useEffect, useState} from 'react';

const Validation = (props) =>{

let [msg,changemsg] = useState('');

useEffect(()=>{
    if(props.text.length === 0){
        changemsg('');
    }else if(props.text.length < 5){
        changemsg('too short');
    }else{
        changemsg('good');
    }
})


return (
   <div>
    <h1>{msg}</h1>
   </div>
  );
}

从“React”导入{React，useffect，useState}；
常量验证=（道具）=>{
let[msg，changemsg]=useState（“”）；
useffect（（）=>{
如果（props.text.length==0）{
changemsg（“”）；
}否则如果（props.text.length<5）{
changemsg（‘太短’）；
}否则{
changemsg（“好”）；
}
})
返回(
{msg}
);
}

在这里使用useffect（）钩子时，我关心的是应用程序的性能。使用钩子会使应用程序性能变差吗？在函数和类组件中编写if循环之类的东西的最佳方法是什么

---

谢谢。

如果你想展示一些东西，根据道具的不同，你不需要useState。 最好用钩子

const msg=usemo（（）=>{
如果（props.text.length==0）{
返回“”；
}否则如果（props.text.length<5）{
返回“太短”；
}否则{
返回“好”；
}
}，[props.text]）

---

Hook useMemo允许准备一些值。只有在更新依赖项（在您的情况下是props.text）时，才会更新该值。

第一个代码段会抛出什么错误？第一个版本没有明显的错误，您的“修复”充其量也没有必要。您得到的错误是什么？错误是“重新渲染过多。React限制渲染次数以防止无限循环”。如果您未能传入文本道具，组件将在无限循环中渲染。

const msg = useMemo(()=>{
    if(props.text.length === 0){
        return '';
    }else if(props.text.length < 5){
        return 'too short';
    }else{
        return 'good';
    }
}, [props.text])