React开发新手常犯的5件事

标记，而最后一个ChildComponent则不呈现。'false'和{'passedaspropsfalse'}会导致showIntro和showBody被无意中分配了字符串值false而不是布尔值false。对于前两个ChildComponents，showIntro和showBody的计算结果都为true。这是由于隐式类型强制。当&&运算符检查showIntro或showBody（两者strings)，两个字符串都将被强制为true。最后一个ChildComponent接收布尔值false，因此它无法正确呈现任何内容。console.log(`showIntrotype:${typeofshowIntro}`);console.log(`showIntroevaluatedto:${showIntro&&true}`);console.log(`showBodytype:${typeofshowBody}`);console.log(`showBodyevaluatedto:${showBody&&true}`);为了确认这一点，我们运行console.log()来检查每个ChildComponent中prop的结果。如此处所示，对于初学者来说，在将道具传递给其他组件时能够区分使用引号和大括号之间的区别非常重要。您可以使用引号来传递字符串文字。//passinginaString花括号用于传递JavaScript表达式。//passinginaNumber//passinginaBoolean以下是Reac文档中的一些注释：在属性中嵌入JavaScript表达式时，不要将引号括在大括号内。您应该使用引号（用于字符串值）或大括号（用于表达式），但不能在同一属性中同时使用这两种引号。4.在render()里面调用setState()死循环错误信息如下图即使你的组件中没有componentWillUpdate()或componentWillUpdate()，你仍然可能会遇到这个错误。当您在render()函数内调用setState()时，也会发生此错误。为什么会这样？每次调用setState()时，React都会通过调用render()来重新渲染。你的render()函数里面有什么？设置状态（）。你看到结果了吗？无限循环。只需将setState()调用移到render()函数之外。如果必须在安装组件后初始化状态（可能从API端点获取数据），请在componentDidMoun()中执行。如果可以在挂载组件之前初始化状态，也可以使用构造函数来完成。5、setState()的异步性调试时，通常使用console.log()打印值。但是，当代码异步运行时，这就不太适用了。handleCounterIncrement=()=>{const{counter}=this.state;console.log(`Beforeupdate:${counter}`);this.setState({counter:counter+1});console.log(`Afterupdate:${counter}`);};你以前试过这样做吗？坏消息-setState()调用是异步的。不能保证给定的代码将按顺序执行。它可能导致如下输出：在执行setState()之前执行了两次console.log()调用。因此，它打印了两次先前状态的值。如果要在调用setState()之前和之后检查状态值，请将回调作为setState()中的第二个参数传递。handleCounterIncrement=()=>{const{counter}=this.state;console.log(`beforeupdate:${counter}`);this.setState({counter:counter+1},()=>{console.log(`afterupdate:${this.state.counter}`);});};回调将在setState()完成后执行，为console.log()提供同步行为。