ReactNotesReact笔记_传智播客react笔记资源-CSDN文库

react

需积分: 10 158 浏览量 2017-11-12 13:17:08 上传评论收藏 9.01MB PDF 举报

资源推荐

资源详情

资源评论

通过实例，学习编写 React 组件的“最佳实践”

Lucas HC

2 个月前

现在前端程序员都知道，React 是组件化的。当我开始学习 React 的时候，我记得当时已经存在了很多不同编写组件的方式了。如

今，React 社区已经愈发成熟，但是对于组件正确编写姿势却没有一个相对完备的指导。

这篇文章仅从作者的观点出发，来谈一谈我们究竟应该如何来写高质量的 React 组件。来谈一谈我们究竟应该如何来写高质量的 React 组件。

在开始前，需要说明以下几个问题：

这篇文章以及代码实例，都采用了 ES6 或者 ES7 的写法；

对于一些基本概念不再进行科普；

适合有 React 初级经验的读者阅读，内容较为简单；

如果有任何问题，欢迎留言交流。

基于 Class 的组件是状态化的，包含有自身方法、生命周期函数、组件内状态等。最佳实践包括但不限于以下一些内容：

我很喜欢 CSS in JavaScript 这一理念。在 React 中，我们可以为每一个 React 组件引入相应的 CSS 文件，这一“梦想”成为了

现实。在下面的代码示例，我把 CSS 文件的引入与其他依赖隔行分开，以示区别：

1. import React, {Component} from 'react'

2. import {observer} from 'mobx-react'

3. import ExpandableForm from './ExpandableForm'

4. import './styles/ProfileContainer.css'

当然，这并不是真正意义上的 CSS in JS，具体实现其实社区上有很多方案。我的 Github 上 fork 了一份各种 CSS in JS 方案的

多维度对比，感兴趣的读者可以参考这里：HOUCe/css-in-js。

在编写组件过程中，一定要注意初始状态的设定。同时，利用 ES6 模块化的知识，我们确保该组件暴露都是 “export default”

形式，方便其他模块（组件）的调用和团队协作。

1. import React, {Component} from 'react'

2. import {observer} from 'mobx-react'

3. import ExpandableForm from './ExpandableForm'

4. import './styles/ProfileContainer.css'

6. export default class ProfileContainer extends Component {

7. state = { expanded: false }

8. ......

通过实例，学习编写 React 组件的“最佳实践”通过实例，学习编写 React 组件的“最佳实践”

基于 Class 的组件最佳实践（Class Based Components）基于 Class 的组件最佳实践（Class Based Components）

1）引入 CSS 依赖（Importing CSS）1）引入 CSS 依赖（Importing CSS）

2）设定初始状态（Initializing State）2）设定初始状态（Initializing State）

3）设定 propTypes 和 defaultProps3）设定 propTypes 和 defaultProps

propTypes 和 defaultProps 都是组件的静态属性。在组件的代码中，这两个属性的设定位置越高越好。这两个属性的设定位置越高越好。因为这样方便其他阅读代

码者或者开发者自己 review，一眼就能看到这些信息。这些信息就如同组件文档一样，对于理解或熟悉当前组件非常重要。

同样，原则上，你编写的组件都需要有 propTypes 属性。如同以下代码：

1. export default class ProfileContainer extends Component {

2. state = { expanded: false }

4. static propTypes = {

5. model: React.PropTypes.object.isRequired,

6. title: React.PropTypes.string

7. }

9. static defaultProps = {

10. model: {

11. id: 0

12. },

13. title: 'Your Name'

14. }

Functional Components 是指没有状态、没有方法，纯组件。Functional Components 是指没有状态、没有方法，纯组件。应该最大限度地编写和使用这一类组件。这类组件作为函数，其参数

就是 props, 我们可以合理设定初始状态和赋值。

1. function ExpandableForm({ onExpand, expanded = false, children, onSubmit }) {

2. const formStyle = expanded ? {height: 'auto'} : {height: 0}

3. return (

4. <form style={formStyle} onSubmit={onSubmit}>

5. {children}

6. <button onClick={onExpand}>Expand</button>

7. </form>

8. )}

在编写组件方法时，尤其是你将一个方法作为 props 传递给子组件时，需要确保 this 的正确指向。我们通常使用 bind 或者 ES6

箭头函数来达到此目的。

1. export default class ProfileContainer extends Component {

2. state = { expanded: false }

4. handleSubmit = (e) => {

5. e.preventDefault()

6. this.props.model.save()

7. }

9. handleNameChange = (e) => {

10. this.props.model.changeName(e.target.value)

11. }

12.

13. handleExpand = (e) => {

14. e.preventDefault()

15. this.setState({ expanded: !this.state.expanded })

16. }

当然，这并不是唯一做法。实现方式多种多样，我专门有一片文章来对比 React 中对于组件 this 的绑定，可以参考：从 React 绑

定 this，看 JS 语言发展和框架设计。

在上面的代码示例中，我们使用了：

4）组件方法（Methods）4）组件方法（Methods）

5）setState 接受一个函数作为参数（Passing setState a Function）5）setState 接受一个函数作为参数（Passing setState a Function）

1. this.setState({ expanded: !this.state.expanded })

这里，关于 setState hook 函数，其实有一个非常“有意思”的问题。React 在设计时，为了性能上的优化，采用了 Batch 思想，

会收集“一波” state 的变化，统一进行处理。就像浏览器绘制文档的实现一样。所以 setState 之后，state 也许不会马上就发state 也许不会马上就发

生变化，这是一个异步的过程。生变化，这是一个异步的过程。

这说明，我们要谨慎地在 setState 中使用当前的 state，因为当前的state 也许并不可靠。为了规避这个问题，我们可以这样

做：

1. this.setState(prevState => ({ expanded: !prevState.expanded }))

我们给 setState 方法传递一个函数，函数参数为上一刻 state，便保证setState 能够立刻执行。

关于 React setState 的设计， Eric Elliott 也曾经在一篇文章中这么喷过：https://medium.com/javascript-scene/setstate-

gate-abc10a9b2d82#.ftefj7nn2 ，并由此展开了多方“撕逼”。作为围观群众，我们在吃瓜的同时，一定会在大神论道当中收获很

多思想，建议阅读。

如果你对 setState 方法的异步性还有困惑，可以同我讨论，这里不再展开。

这个其实没有太多可说的，仔细观察代码吧：我们使用了解构赋值。除此之外，如果一个组件有很多的 props 的话，每个 props 应每个 props 应

该都另起一行该都另起一行，这样书写上和阅读性上都有更好的体验。

1. export default class ProfileContainer extends Component {

2. state = { expanded: false }

4. handleSubmit = (e) => {

5. e.preventDefault()

6. this.props.model.save()

7. }

9. handleNameChange = (e) => {

10. this.props.model.changeName(e.target.value)

11. }

12.

13. handleExpand = (e) => {

14. e.preventDefault()

15. this.setState(prevState => ({ expanded: !prevState.expanded }))

16. }

17.

18. render() {

19. const {model, title} = this.props

20.

21. return (

22. <ExpandableForm

23. onSubmit={this.handleSubmit}

24. expanded={this.state.expanded}

25. onExpand={this.handleExpand}>

26. <div>

27. <h1>{title}</h1>

28. <input

29. type="text"

30. value={model.name}

31. onChange={this.handleNameChange}

32. placeholder="Your Name"/>

33. </div>

34. </ExpandableForm>

35. )

36. }}

6）合理利用解构（Destructuring Props）6）合理利用解构（Destructuring Props）

这一条是对使用 mobx 的开发者来说的。如果你不懂 mobx，可以大体扫一眼。我们强调使用 ES next decorate 来修饰组件使用 ES next decorate 来修饰组件，如

同：

1. @observerexport default class ProfileContainer extends Component {

使用修饰器更加灵活且可读性更高。即便你不使用修饰器，也需要如此暴露你的组件：

1. class ProfileContainer extends Component {

2. // Component code}export default observer(ProfileContainer)

一定要尽量避免以下用法：

1. <input

2. type="text"

3. value={model.name}

4. // onChange={(e) => { model.name = e.target.value }}

5. // ^ Not this. Use the below:

6. onChange={this.handleChange}

7. placeholder="Your Name"/>

不要：

1. onChange = {(e) => { model.name = e.target.value }}

而是：

1. onChange = {this.handleChange}handleChange = (e) => {

2. this.props.model.name = e.target.value}

原因其实很简单，每次父组件 render 的时候，都会新建一个新的函数并传递给 input。如果 input 是一个 React 组件，这会粗

暴地直接导致这个组件的 re-render，需要知道，Reconciliation 可是 React 成本最高的部分。

另外，我们推荐的方法，会使得阅读、调试和更改更加方便。

真正写过 React 项目的同学一定会明白，JSX 中可能会存在大量的条件判别，以达到根据不同的情况渲染不同组件形态的效果。就

像下图这样：

这样的结果是不理想的。这样的结果是不理想的。我们丢失了代码的可读性，也使得代码组织显得混乱异常。多层次的嵌套也是应该避免的。

针对于此，有很对类库来解决 JSX-Control Statements 此类问题，但是与其引入第三方类库的依赖，还不如我们先自己尝试探索解

决问题。

此时，是不是有点怀念if…else？是不是有点怀念if…else？我们可以使用大括号内包含立即执行函数IIFE，来达到使用 if…else 的目的：

当然，大量使用立即执行函数会造成性能上的损失。所以，同代码可读性上的权衡，还是有必要好好斟酌的。

7）使用修饰器（Decorators）7）使用修饰器（Decorators）

8）闭包（Closures）8）闭包（Closures）

9）JSX中的条件判别（Conditionals in JSX）9）JSX中的条件判别（Conditionals in JSX）

剩余181页未读，继续阅读

评论收藏

内容反馈

qq_40167106

粉丝: 2
资源: 12

React Notes React笔记

最新资源

React Notes React笔记

React笔记

react 学习笔记

React学习笔记（参考官方文档总结）

React学习笔记，个人PPT总结与分享

react视频教程，从入门到精通

传智播客struts2全程学习笔记

传智播客Html5课程笔记

传智播客ssh+ssm五大框架笔记

传智播客JPA学习笔记修改免积分版

React_Notes_V3

Technical-Notes:Java笔记

Notes:黑曜石笔记集

Notes-of-Study:学习笔记

Notes-App:申请您​​的笔记

2018传智播客web前端开发 39 期视频教程（完整版）

邵山欢老师web前端视频

SKewl-Notes:我的笔记 WDI

Notes:笔记-Android应用程序

Notes:我的公共笔记

leetcodeoj和leetcode-Notes:笔记

Learning-Notes:学习笔记

Reading-Notes:阅读笔记

Notes:我所有的笔记

Notes:笔记仓库

Notes-Flutter:笔记应用

Notes_app:网络笔记

笔记「Notes」-crx插件

Notes:学习笔记

Notes:开发笔记

Notes:我的笔记

最新资源

Notes-App:申请您的笔记