在 React.Js 中创造条件的最佳方法是什么

Question

最近，我一直在关注一个关于 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;

这就是我修复它的方法

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>
  );
}

使用 useEffect() 钩子时我关心的事情是应用程序的性能。 使用钩子会使应用程序性能变弱吗？ 以及在功能组件和 class 组件中编写诸如 if 循环之类的最佳方法是什么。

谢谢你。

Answer 1

如果你想展示一些东西，取决于 props，你不需要 useState。 最好使用钩子useMemo

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

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