我老板：你根本不懂React！
时间：2023-03-18 20:31:57
科技观察
前言我已经使用React多年了，我确信我对它非常了解，但是最近我的老板对我说，“你不知道React，你对它一无所知。”我生他的气，但他指出了我程序中的三个错误。我现在记录下来，分享给还不知道的朋友。1、你知道“&&”的用法吗？在React程序中，我经常使用“&&”操作符来决定是否显示内容，如下：constApp=()=>{const[list,setList]=useState([])//模拟请求数据setTimeout(()=>{setList(['fatfish','medium'])},2000)return({list.length&&
}
)}我的老板：“你不知道&&”运算符的特点吗？当请求还没有成功返回时，会直接渲染“0”。我不服气，因为我一直都是这样写代码的，从来没有出错过。为了证明老大错了，我写了下面的例子。constList=({list=[]})=>{return(
{list.map((name)=>{return{name} })}
)}constApp=()=>{const[list,setList]=React.useState([])//模拟请求数据setTimeout(()=>{setList(['fatfish','medium'])},3000)return(list.length&&
)}ReactDOM.render(
,document.getElementById('app'))天哪！老板说的对，页面一开始显示0，3秒后显示列表。为什么？来自MDN的提示：“当且仅当所有操作数都为真时，一组布尔操作数的逻辑与(&&)运算符（逻辑合取）为真。否则为假。”更一般地，运算符返回从左到右求值时遇到的第一个假操作数的值，或者如果它们都为真，则返回最后一个操作数的值。例子如下：constx1=0constx2='fatfish'constx3=1constx4='medium'console.log(x1&&x2)//0console.log(x3&&x4)//medium现在终于明白为什么了我写这段代码会出错。原因如下：list.length&&
0&&
//0怎么解？我找到了三种方法来解决这个问题。希望你不要重蹈我的覆辙，祝福你。//1.Convertlist.lengthtoboolean!!list.length&&
//2.使用三元表达式和nulllist.length?
:null//3.由特定的逻辑控制list.length>=1&&
2."props.children"的奇怪行为我猜你写过类似的代码。将内容传递给
组件时，会显示“children”。如果没有，将显示一个空的工具提示。像这样：constContainer=({children})=>{if(children){return(
children的内容是：
{children} )}else{return(