React

[chaims]

React

基础

学习路径

• 熟悉React API 仔细研读官方文档,参照官方的规范完成一个React版的todolist。可参考这个例子,只需要实现功能即可，不需要做界面美化，也不需要分成多个文件，把所有的代码写在一个文件即可。

• 搭建热加载开发环境 参照该教程,将步骤一完成的todolist移植到热加载开发环境中，把代码拆开，写入不同的文件里，要求实现浏览器自动刷新并且不丢失react状态的功能。

• 熟悉Redux 参照教程,将步骤二完成的todolist修改成react+redux版的todolist

• 熟悉react-router 查阅react-router教程,将步骤三的todolist扩展成多列表的todolist，即app首页展示所有的列表（要求也实现列表的增删改功能），用户点击某个列表，app转而显示该列表下所有的任务。所以该app有两个页面，请用react-router实现。

• 熟悉一个React UI库 较为知名的库有：Ant Design,Material UI，请挑选一个，美化之前完成的todolist

  参考资料

• https://reactjs.org/

• react中文

• react入门教程

• redux中文文档

• and design实践教程

• https://juejin.im/entry/5b49af6d6fb9a04fe25ec224

• 知乎-如何系统学习react

• 阿里视频

• https://www.rails365.net/playlists/react-ji-chu-shi-jian-pian-xiao-xing-cai-wu-xi-tong

• https://segmentfault.com/a/1190000012921279

• http://www.ruanyifeng.com/blog/2015/03/react.html

• awesome and design

[chaims]

[chaims]

官网DOC

JSX

• 任意地在 JSX 当中使用 JavaScript 表达式, 表达式要包含在大括号里

• 推荐在 JSX 代码的外面扩上一个小括号，这样可以防止 分号自动插入的bug

• 在 if 或者 for 语句里使用 JSX，将它赋值给变量，当作参数传入，作为返回值都可以

• 使用引号来定义以字符串为值的属性

• 使用大括号来定义以 JavaScript 表达式为值的属性

• JSX 标签是闭合式的，那么你需要在结尾处用 />, 可以相互嵌套

• React DOM 使用 camelCase 小驼峰命名 来定义属性的名称，而不是使用 HTML 的属性名称。

• JSX 防注入攻击

• Babel 转译器会把 JSX 转换成一个名为 React.createElement() 的方法调用

• style 属性接受由 CSS 属性构成的 JS 对象

• class 要写成 className

• onChange 事件表现更接近我们的直觉

  元素

• React 当中的元素事实上是普通的对象

• 一般只会定义一个根节点

• ReactDOM.render()，将React元素渲染到根DOM节点中

• React 元素都是immutable 不可变的,当元素被创建之后，你是无法改变其内容或属性的。只有通过render

• 实际生产开发中，大多数React应用只会调用一次 ReactDOM.render()

• React 只会更新必要的部分

  组件&Props

• 函数定义/类定义组件

• 组件名称必须以大写字母开头。在使用该组件时你必须定义或引入它。

• 组件的返回值只能有一个根元素。

• 提取组件

• 属性扩散，{...props} 写在后面的属性值会覆盖前面的属性

  State & 生命周期

• 状态是私有的，完全受控于当前组件

• 将函数转换为类

• 使用类就允许我们使用其它特性，例如局部状态、生命周期钩子

• 为一个类添加局部状态

• 将生命周期方法添加到类中

• 生命周期钩子 componentDidMount componentWillUnmount

• 关于 setState() 这里有三件事情需要知道 不要直接更新状态,应当使用 setState(); 构造函数是唯一能够初始化 this.state 的地方; 状态更新可能是异步的, 可以将多个setState() 调用合并成一个调用来提高性能，setState() 可以接受一个函数；

• 数据自顶向下流动 组件可以选择将其状态作为属性传递给其子组件； 组件是有状态还是无状态被认为是可能随时间而变化的组件的实现细节

• getInitialState、getDefaultProps 可以直接定义 defaultProps 这个类属性来替代getDefaultProps

• componentWillMount 在 render 之前调用，你可以在这个方法里面调用 setState 改变状态，并且不会导致额外调用一次 render

• componentDidMount 装载完成之后调用一次，在 render 之后调用，从这里开始可以通过 ReactDOM.findDOMNode(this) 获取到组件的 DOM 节点

• componentWillReceiveProps、shouldComponentUpdate、componentWillUpdate、componentDidUpdate 不会在首次 render 组件的周期调用

• componentWillUnmount

  Dom操作

• findDOMNode findDOMNode() 方法拿到组件对应的 DOM 元素。 不能用在无状态组件上。

• Refs 要引用的 DOM 元素上面设置一个 ref 属性指定一个名称，然后通过 this.refs.name 来访问对应的 DOM 元素 如果 ref 是在原生 HTML 元素上，拿到的就是 DOM 元素，如果设置在自定义组件上，它拿到的就是组件实例，需要通过 findDOMNode 来拿到组件的 DOM 元素。 你可以使用 ref 到的组件定义的任何公共方法，比如 this.refs.myTypeahead.reset()； Refs 是访问到组件内部 DOM 节点唯一可靠的方法； Refs 会自动销毁对子组件的引用（当子组件删除时）； 不要在 render 或者 render 之前访问 refs； 不要滥用 refs，比如只是用它来按照传统的方式操作界面 UI：找到 DOM -> 更新 DOM；

  事件处理

• React事件绑定属性的命名采用驼峰式写法，而不是小写。

• 如果采用 JSX 的语法你需要传入一个函数作为事件处理函数，而不是一个字符串

• 不能使用返回 false 的方式阻止默认行为，使用 preventDefault

• JSX 回调函数中的 this，类的方法默认是不会绑定 this 的，需要显示引用; 或者实验性的属性初始化器语法 或者可以在回调函数中使用 箭头函数 通常建议在构造函数中绑定或使用属性初始化器语法来避免类性能问题。

• 向事件处理程序传递参数 通过 bind 方式向监听函数传参，在类组件中定义的监听函数，事件对象 e 要排在所传递参数的后面

  通信

• 父子组件间通信 props && refs

• 非父子组件间的通信 使用全局事件 Pub/Sub 模式，在 componentDidMount 里面订阅事件，在 componentWillUnmount 里面取消订阅，当收到事件触发的时候调用 setState 更新 UI。

  Mixins

  mixin 相当于组件的一个扩展，在 mixin 中也能定义“生命周期”方法。

  条件渲染

• 元素变量 if

• 与运算符 && ， true && expression / false && expression

• 三目运算符

• 阻止组件渲染 render 方法返回 null

  列表 & Keys

• 渲染多个组件
  使用{}在JSX内构建一个元素集合

• 基础列表组件

• Keys 用keys提取组件;元素的key只有在它和它的兄弟节点对比时才有意义 元素的key在他的兄弟元素之间应该唯一,不需要是全局唯一; key不会传递给你的组件。如果您的组件中需要使用和key相同的值，请将其作为属性传递：

  表单

• 受控组件 使用”受控组件”,每个状态的改变都有一个与之相关的处理函数

• textarea 标签
  value记录其值

• select 标签
  不使用之前的selected属性，而在根select标签上用value属性来表示选中项；

• file input 标签
  value 属性是只读的, 一个非受控组件

• 多个输入的解决方法

  状态提升

  组件需要共用状态数据，将这部分共享的状态提升至他们最近的父组件当中进行管理。 好处可以更快地寻找和定位bug的工作。 如果某些数据可以由props或者state提供，那么它很有可能不应该在state中出现。

  组合 vs 继承

• 建议使用组合,而不是继承来复用组件之间的代码

• 包含关系 JSX 标签内的任何内容都将通过 children 属性传入

• 特殊实例

• 组件可以接受任意元素，包括基本数据类型、React 元素或函数。

• 要在组件之间复用 UI 无关的功能，我们建议将其提取到单独的 JavaScript 模块中。这样可以在不对组件进行扩展的前提下导入并使用该函数、对象或类。

  Data Flow

  Data Flow 只是一种应用架构的方式，比如数据如何存放，如何更改数据，如何通知数据更改等等

  官方的 Flux

• the dispatcher 处理动作分发，维护 Store 之间的依赖关系 一个应用只需要一个 dispatcher 作为分发中心，管理所有数据流向，分发动作给 Store，没有太多其他的逻辑（一些 action creator 方法也可以放到这里）。 基于 Flux 的架构思路，Dispatcher.js 提供的 API 很简单：

  • register(function callback): string 注册回调函数，返回一个 token 供在 waitFor() 使用
  • unregister(string id): void 通过 token 移除回调
  • waitFor(array ids): void 在指定的回调函数执行之后才执行当前回调。这个方法只能在分发动作的回调函数中使用
  • dispatch(object payload): void 分发动作 payload 给所有注册回调
  • isDispatching(): boolean 返回 Dispatcher 当前是否处在分发的状态

• the stores 数据和逻辑部分 Stores 包含应用的状态和逻辑，不同的 Store 管理应用中不同部分的状态。

• the views React 组件，这一层可以看作 controller-views，作为视图同时响应用户交互

• the actions 提供给 dispatcher 传递数据给 store 所谓动作就是用来封装传递数据的，动作只是一个简单的对象，包含两部分：payload（数据）和 type（类型），type 是一个字符串常量，用来标识动作。

  更优雅的 Redux

• 三个基本原则 整个应用只有唯一一个可信数据源，也就是只有一个 Store; State 只能通过触发 Action 来更改； State 的更改必须写成纯函数，也就是每次更改总是返回一个新的 State，在 Redux 里这种函数称为 Reducer；

• Actions 一个单纯的包含 { type, payload } 的对象 Action Creators 是一个 pure function，它最后会返回一个 action 对象

• Reducers Reducer 用来处理 Action 触发的对状态树的更改。 Reducer 也是 pure function，这点非常重要，所以绝对不要在 reducer 里面做一些引入 side-effects 的事情，比如：直接修改 state 参数对象；请求 API；调用不纯的函数，比如 Data.now() Math.random()；

• Store

• Data Flow

  理念

• 单一功能原则，在理想状况下，一个组件应该只做一件事情

• 如果这个组件功能不断丰富，它应该被分成更小的组件

[chaims]

Redux

基础

• reducers
• store 维持应用的状态; 提供getState()方法获取 提供dispatch(action)方法更新状态; 通过subscribe(listener)注册监听器; 通过subscribe(listener)报道查看的函数注销监听器。
• actions
• combineReducers 合并reducers combineReducers 接收一个对象并返回一个函数，当 combineReducers 被调用时，它会去调用每个 reducer，并把返回的每一块 state 重新组合成一个大 state 对象（也就是 Redux 中的 Store）。
• middleware 用于支持异步 actionCreator只能返回普通的对象，所以使用自定义中间件（middleware）来支持异步 action 为异步 action creator 提供的中间件叫 thunk middleware 在 Redux 中，中间件是纯粹的函数，有明确的使用方法并且严格的遵循以下格式：

  var anyMiddleware = function ({ dispatch, getState }) {
      return function(next) {
          return function (action) {
              // 你的中间件业务相关代码
          }
      }
  }

  applyMiddleware 接收所有中间件作为参数，返回一个供 Redux createStore 调用的函数。 当最后这个函数被调用时，它会产生一个 Store 增强器，用来将所有中间件应用到 Store 的 dispatch 上。 applyMiddleware(middleware1, middleware2, ...)(createStore)

• subscribe
• 把 Redux 和 React 绑定在一起，使用 “provide” 和 “connect” 绑定，不必再关心隐含在内的订阅方法。

  技巧

• Object.assign() 或 ... 展开符

• Example

  1. counter 例子
  2. todos 例子

参考文档

• 中文文档
• 课程笔记