《React设计模式与最佳实践》笔记

书里的demo都是15.3.2如下版本的，有些demo用最新的react 16.x版本会报错，安装包的时候记得改一下版本

 

第一章 React 基础

命令式编程描述代码如何工做，而声明式编程则代表想要实现什么目的

 

第二章 整理代码

展开属性操做符也是一项很重要的特性

{...props}

 

常见模式

1. 多行书写

2. 多个属性的书写

3. 条件语句

render-if包

4. 循环

map

5. 控制语句

jsx-control-statements

6. 次级渲染

拆分组件

 

ESLint

.eslintrc 文件

插件 eslint-plugin-react eslint-config-airbnb eslint@^2.9.0 eslint-pluginjsx-a11y@^1.2.0 eslint-plugin-import@^1.7.0 eslint-plugin-react@^5.0.1

 

函数式编程基础

纯粹函数是指它不产生反作用，也就是说它不会改变自身做用域之外的任何东西。

函数不会修改变量值，而是建立新的变量，赋新值后再返回变量。操做数据的这种方式称为不可变性。

柯里化

函数（和组件）能够结合产生新函数，从而提供更高级的功能与属性。

 

第三章 开发真正可复用的组件

1.props

2.state

解决函数绑定问题的最佳方案是在构造器内进行绑定操做，这样即便屡次渲染组件，它也不会发生任何改变。

3.无状态函数式组件,没有state

this 在无状态函数式组件的执行过程当中不指向组件自己。

无状态函数式组件只接收props（以及上下文）参数，并返回相应元素。

没有提供任何像componentDidMount 这样的生命周期钩子

setState 方法是异步的

propTypes，类型校验

 

可复用组件

react-docgen

 

可用的风格指南

react-storybook 包：@kadira/react-storybook-addon-info

 

第四章 组合一切

4.1 组件间的通讯

props

children 是一个特殊的prop，拥有者组件能够将它传递给渲染方法内定义的组件。

 

4.2 容器组件与表现组件模式

容器组件：

 更关心行为部分；

 负责渲染对应的表现组件；

 发起API 请求并操做数据；

 定义事件处理器；

 写做类的形式。

 

表现组件：

 更关心视觉表现；

 负责渲染HTML 标记（或其余组件）；

 以props 的形式从父组件接收数据；

 一般写做无状态函数式组件。

 

4.3 mixin

mixin 只能和createClass 工厂方法搭配使用

 

4.4 高阶组件

高阶组件其实就是函数，它接收组件做为参数，对组件进行加强后返回。

 

4.5 recompose

context 16.x有了很大的更改

 

4.6 函数子组件

const Name = ({ children }) => children('World')

Name.propTypes = {

hildren: React.PropTypes.func.isRequired,

}

<Name>

{name => <div>Hello, {name}!</div>}

</Name>

 

第五章 恰当地获取数据

5.1 数据流

单向数据流

5.1.1 子组件与父组件的通讯（回调函数）

每当子组件须要向父组件推送数据或者通知父组件发生了某个事件时，能够传递回调函数，同时将其他逻辑放在父组件中。

 

5.2 数据获取

用于获取数据的代码能够放在两个生命周期钩子中：componentWillMount 和component-DidMount。

 

5.3 react-refetch

 

第六章 为浏览器编写代码

6.1 表单

6.1.1 自由组件

6.1.2 受控组件

6.1.3 JSON schema

react-jsonschema-form

 

6.2 事件

http://reactpatterns.com/#event-switch

命名事件处理器函数的最流行作法就是事件名前加上handle 前缀（如handleKeyDown）。

若是须要为同一个组件建立新的事件处理器，无须建立新的方法并绑定，只要在switch 语句中增长一个事例便可。

React 实际作的是在根元素上添加单个事件处理器，因为事件冒泡机制，这个处理器会监听全部事件。当浏览器触发咱们想要的事件时，React 会表明相应组件调用处理器。这个技巧称做事件代理，能够优化内存和速度。

 

6.3 ref

表单用得多

 

6.4 动画

react-addons-css-transition-group react-motion

 

第七章 美化组件

7.1 CSS in JavaScript

7.2 行内样式

7.3 Radium

7.4 CSS 模块

react-css-modules

!! 7.5 Styled Component

这个库的另外一项绝佳特性是主题。将组件封装在ThemeProvider 组件中，能够为组件树注入主题属性，当要和其余组件共享一部分样式，剩下部分取决于当前选中主题时，建立UI 会变得很是方便。

 

第八章 服务端渲染的乐趣与益处

8.1 通用应用

同构应用就是指应用在服务端和客户端看起来如出一辙。

 

8.2 使用服务端渲染的缘由

8.2.1 SEO

8.2.2 通用代码库

8.2.3 性能更强

8.2.4 不要低估复杂度

 

8.5 Next.js

 

第九章 提高应用性能

9.1 一致性比较与key 属性，key要惟一的

 

9.2 优化手段

shouldComponentUpdate

它的用法很直观，建立组件类时继承React.PureComponent 来代替React.Component便可。

9.2.2 无状态函数式组件

 

9.3 经常使用解决方案

9.3.1 why-did-you-update 好像没有用了

9.3.2 在渲染方法中建立函数

9.3.3 props 常量

9.3.4 重构与良好设计

 

9.4 工具与库

immutable.js

 

9.4.2 性能监控工具

chrome-react-perf

react-perf-tool

 

9.4.3 Babel 插件

babel-plugin-transform-react-inline-elements

 

第十章 测试与调试

Jest

Mocha

TestUtils 和Enzyme

 

测试React 组件的方式通常有两种：

浅渲染；

将组件挂载到独立DOM中。

 

10.8 经常使用测试方案

10.8.1 测试高阶组件

10.8.2 页面对象模式

 

10.10 React 错误处理

react-component-errors

 

第十一章 须要避免的反模式

11.1 用prop 初始化状态

若是咱们真的想要用属性值初始化组件，而且能够确定这些值将来不会改变呢？

这种状况下，最好阐明这种作法的用意，并为属性起一个能清楚表达含义的名称

 

11.2 修改状态

首先，若是不经过setState 修改状态，则会出现两种糟糕的状况：

 状态改变不会触发组件重渲染；

 之后不管什么时候调用setState，以前修改的状态都会渲染到页面上。

 

11.3 将数组索引做为key

 

11.4 在DOM 元素上展开props 对象

 

第十二章 将来的行动

12.3 发布npm 包

npm publish