PDF《Introduction》

&

flag2 &

&

!flag3) { if (flag4) { return Blah else if (flag5) { return Meh else { return Herp else { return Derp } ) };

或者也可以在满足条件的时候使用return强制跳出函数,这样能避免后面冗余的判 断执行. const sampleComponent const basicCondition = flag &

&

flag2 &

&

!flag3;

if (!basicCondition) return Derp;

if (flag4) return Blah;

if (flag5) return Meh;

return Herp } Conditional in JSX

7 参考资料: https://engineering.musefind.com/our-best-practices-for-writing-react- components-dec3eb5c3fc8 Conditional rendering Conditional in JSX

8 setState函数的异步性 简述 在某些情况下,React框架出于性能优化考虑,可能会将多次state更新合并成一次 更新.正因为如此,setState实际上是一个异步的函数. 但是,有一些行为也会阻 止React框架本身对于多次state更新的合并,从而让state的更新变得同步化. 比如: eventListeners, Ajax, setTimeout 等等. 详解 当setState() 函数执行的时候,函数会创建一个暂态的state作为过渡state,而不是 立即修改this.state. 如果在调用setState()函数之后尝试去访问this.state,你得到 的可能还是setState()函数执行之前的结果. 在使用setState()的情况下,看起来同 步执行的代码其实执行顺序是得不到保证的.原因上面也提到过,React可能会将 多次state更新合并成一次更新来优化性能. 运行下面这段代码,你会发现当和addEventListener, setTimeout 函数或者发出 AJAX call的时候,调用setState, state会发生改变.并且render函数会在setState() 函数被触发之后马上被调用.那么到底发生了什么呢?事实上,类似setTimeout() 函数或者发出ajax call的fetch函数属于调用浏览器层面的API,这些函数的执行并不 存在与React的上下文中,所以React并不能够像控制其他存在与其上下文中的函数 一样,将多次state更新合并成一次. 在上面这些例子中,React框架之所以在选择在调用setState函数之后立即更新 state而不是采用框架默认的方式,即合并多次state更新为一次更新,是因为这些函 数调用(fetch,setTimeout等浏览器........