如何以React寫出好的程式碼，避免常犯的新手錯誤。 present how to use React to write the good parts and avoid the common mistakes

1. React踩雷⼤大作戰
Anderson Chen
2016/12/23

2. • Life Cycle
• Smart vs.Dumb Components
• Best Practice by AirBnB

3. 乾我屁事，會動就好啊
setState怎麼不會動？
Life Cycle

5. 渲染前調⽤用⼀一次，這时DOM還没有被渲染
componentWillMount

6. • 渲染完成後調⽤用⼀一次，這个时候DOM已经
渲染了了
• 初始化其他框架的設置了了，如JQuery/JS
绑定事件
componentDidMount

7. • 初始化渲染不會調⽤用，在接收到新的props
时，會調⽤用這个⽅方法
• 更更新前，最後⼀一次修改state，⽽而不會觸發
重新渲染
componentWillReceiveProps

8. • 初始化渲染不會調⽤用，接收到新的props
或state时調⽤用
• React 需要重繪⾴頁⾯面時，都會檢查看看
shouldComponentUpdate 回傳值是
false/true
• 不需重繪，⼀一定要加return false
shouldComponentUpdate

9. • nextProps === nextState
• ⽤用官⽅方提供的Shallow Compare吧！
物件比較不是很簡單嗎?

10. 初始化渲染不會調⽤用，更更新前調⽤用
componentWillUpdate

11. 初始化渲染不會調⽤用，更更新後調⽤用
componentDidUpdate

12. 组件移除前調⽤用
componentWillUnmount

13. A componentWillMount
A render
A componentDidMount

14. A componentWillMount
A render：true
A componentDidMount

15. A componentWillMount
A render：false
A componentDidMount
A render：true

16. A componentWillMount
A render：false
A componentDidMount：false
A render：true

17. A componentWillMount
A render：false
A render：true
A componentDidMount：true

19. Parent componentWillMount
Parent render
Child componentWillMount
Child render
Child componentDidMount
Parent componentDidMount

20. parent-constructor
parent-render
child-constructor
child-render
parent-componentDidMount
parent-render
child-
componentWillReceiveProps
child-render

21. 元件不就把功能拉出來來，拆細⼀一點⽽而已啊？
Smart vs Dumb
Components

22. Smart Component
• How things work
• Call Redux actions
• Provide application
data, do data
fetching
• Provide no DOM
markup or styles
Dumb Component
• How things look
• No app
dependencies
• Only props, and
callbacks
• Rarely have own
state, just UI state

23. • 避免⽗父⼦子组件當中都有state
• ⽗父組件負責邏輯，和⼦子組件的溝通
• 官⽅方推薦⼦子组件只負責從props接收資料，
然後渲染畫⾯面

24. 除非必要，不要濫濫⽤用Refs，會破壞redux的資料流
Refs的破壞⼒力力

25. import { Link } from 'react-router';
import Link from 'react-router/lib/Link';
注意bundle的檔案⼤大⼩小

26. 站在巨⼈人肩膀上，依循好的開發模式
AirBnB Guideline

27. stateless component
// bad
class Listing extends React.Component {
render() {
return <div>{this.props.hello}</div>;
}
// good
function Listing({ hello }) {
return <div>{hello}</div>;
}

28. naming
• 檔名 : PascalCase, ex: ReservationCard.jsx
• 參參考：PascalCase, ex: import ReservationCard
from ‘./ReservationCard';
• Props : 避免使⽤用讓⼈人混淆的屬性
// bad
<MyComponent style="fancy" />
// good
<MyComponent variant="fancy" />

29. Alignment
// bad
<Foo superLongParam="bar"
anotherSuperLongParam="baz" />
// good
<Foo
superLongParam="bar"
anotherSuperLongParam="baz"
/>
<Foo bar="bar" />

30. Quotes
// bad
<Foo bar='bar' />
// good
<Foo bar="bar" />
// bad
<Foo style={{ left: "20px" }} />
// good
<Foo style={{ left: '20px' }} />

31. Props
// bad
<Foo
UserName="hello"
phone_number={12345678}
/>
// good
<Foo
userName="hello"
phoneNumber={12345678}
/>

32. Props
// bad
<Foo
hidden={true}
/>
// good
<Foo
hidden
/>

33. Array Index
// bad
{todos.map((todo, index) =>
<Todo {…todo} key={index} />
)}
// good
{todos.map(todo => (
<Todo {…todo} key={todo.id} />
))}

34. Tags
// bad
<Foo className="stuff"></Foo>
// good
<Foo className="stuff" />

35. Tags
// bad
<Foo
bar="bar"
baz="baz" />
// good
<Foo
bar="bar"
baz="baz"
/>

36. Bind handlers in the
constructor
class extends React.Component {
constructor(props) {
super(props);
this.onClickDiv = this.onClickDiv.bind(this);
}
onClickDiv() {
}
render() {
return <div onClick={this.onClickDiv} />
}
}

37. Methods
• clickHandlers or eventHandlers
ex: onClickSubmit() or onChangeDescription()
• getter methods for render
ex: getSelectReason() or getFooterContent()
• optional render methods
ex: renderNavigation() or renderProfilePicture()

38. • https://segmentfault.com/a/1190000003691119
• http://jaketrent.com/post/smart-dumb-
components-react/
• https://medium.com/@nesbtesh/react-best-
practices-a76fd0fbef21#.xq31syjvl
• https://github.com/airbnb/javascript/tree/master/
react
reference

39. Thanks