PDF《Introduction》

1.

1 1.2 1.2.1 1.2.2 1.2.3 1.2.4 1.2.5 1.2.6 1.2.7 1.2.8 1.2.9 1.2.10 1.2.11 1.2.12 1.2.13 1.2.14 1.2.15 1.2.16 1.2.17 1.3 1.3.1 1.3.2 1.3.3 1.3.4 1.3.5 1.3.6 1.3.7 目录 Introduction Design Patterns and Techniques Conditional in JSX Async Nature Of setState() Dependency Injection Context Wrapper Event Handlers Flux Pattern One Way Data Flow Presentational vs Container Third Party Integration Passing Function To setState() Decorators Feature Flags Component Switch Reaching Into A Component List Components Format Text via Component Share Tracking Logic Anti-Patterns Introduction Props In Initial State findDOMNode() Mixins setState() in componentWillMount() Mutating State Using Indexes as Key

1 1.3.8 1.4 1.4.1 1.4.2 1.4.3 1.4.4 1.4.5 1.4.6 1.4.7 1.5 1.5.1 1.5.2 1.5.3 1.5.4 1.6 1.6.1 1.6.2 1.6.3 1.6.4 1.6.5 1.6.6 1.6.7 1.6.8 1.6.9 1.7 1.7.1 1.7.2 1.7.3 1.8 Spreading Props on DOM elements Handling UX Variations Introduction Composing UX Variations Toggle UI Elements HOC for Feature Toggles HOC props proxy Wrapper Components Display Order Variations Perf Tips Introduction shouldComponentUpdate() check Using Pure Components Using reselect Styling Introduction Stateless UI Components Styles Module Style Functions npm Modules Base Component Layout Component Typography Component HOC for Styling Gotchas Introduction Pure render checks Synthetic Events Related Links

2 3 React Bits 中文版 有关React,你需要知道的一切 Gitbook format: https://wizardforcel.gitbooks.io/react-bits Repo 地址 https://github.com/hateonion/react-bits-CN Your contributions are heartily ? welcome.新司机上路, 欢迎大家随 时提issue和pr进行指正 Design Patterns and Techniques ? Conditional in JSX ? Async Nature Of setState() ? Dependency Injection ? Context Wrapper ? Event Handlers ? Flux Pattern ? One Way Data Flow ? Presentational vs Container ? Third Party Integration ? Passing Function To setState() ? Decorators ? Feature Flags ? Component Switch ? Reaching Into A Component ? List Components ? Format Text via Component ? Share Tracking Logic Anti-Patterns ? Introduction ? Props In Initial State ? findDOMNode() ? Mixins ? setState() in componentWillMount() ? Mutating State Introduction

4 ? Using Indexes as Key ? Spreading Props on DOM elements Handling UX Variations Introduction ? Composing UX Variations ? Toggle UI Elements ? HOC for Feature Toggles ? HOC props proxy ? Wrapper Components ? Display Order Variations Perf Tips ? Introduction ? shouldComponentUpdate() check ? Using Pure Components ? Using reselect Styling ? Introduction ? Stateless UI Components ? Styles Module ? Style Functions ? NPM Modules ? Base Component ? Layout Component ? Typography Component ? HOC for Styling Gotchas ? Introduction ? Pure render checks ? Synthetic Events Related Links Introduction

5 JSX中的状态分支 在以下情况下,和使用三元运算符相比 const sampleComponent return isTrue ? True! : };

使用&

&

符号的表达式简写会是一种更好的实践 const sampleComponent return isTrue &

&

True! };

如果像下面一样有很多的三元运算符的话: // Y soo many ternary??? :-/ const sampleComponent return ( {flag &

&

flag2 &

&

!flag3 flag4 p>

Blah flag5 p>

Meh p>

Herp p>

Derp } ) };

最佳实践: 将逻辑移到子组件内部 另一种hack的做法: 使用IIFE(Immediately-Invoked Function Expression 立即 执行函数) Conditional in JSX

6 有一些库可以解决用jsx控制组件状态的问题,但是这些外部依赖并不是必须的,我 们可以使用 IIFE 将if-else的逻辑封装到组件内部,外部调用者并不需要关心这些逻 辑,正常调用即可. const sampleComponent return ( { if (flag &