News:三分天注定,七分靠打拼,爱拼才会赢!致力打造专业IT博客。如果你对本博客有任何意见或建议请联系作者,邮箱:blog@caokuan.cn

ReactJS 干货分享

逝水无痕 213 0 条

React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设Instagram 的网站。做出来以后,发现这套东西很好用,就在2013年5月开源了。

由于 React 的设计思想极其独特,属于革命性创新,性能出众,代码逻辑却非常简单。所以,越来越多的人开始关注和使用,认为它可能是将来 Web 开发的主流工具。

这个项目本身也越滚越大,从最早的 UI 引擎变成了一整套前后端通吃的 Web App 解决方案。衍生的 React Native 项目,目标更是宏伟,希望用写 Web App 的方式去写 Native App。如果能够实现,整个互联网行业都会被颠覆,因为同一组人只需要写一次 UI ,就能同时运行在服务器、浏览器和手机。

react.jpg

一. State 和 Props

state 是状态机。

应该包括:那些可能被组件的事件处理器改变并触发用户界面更新的数据,譬如需要对用户输入,服务器请求或者时间变化等作出响应。

不应该包括:计算所得数据、React 组件(在 render() 里使用 props 和 state 来创建它)、基于 props 的重复数据(尽可能保持用 props 来做作为唯一的数据来源,把 props 保存到 state 中的有效的场景是需要知道它以前的值得时候,因为未来的 props 可能会变化)。

props:父级向子级传递数据的方式。

二. 有状态组件和无状态组件(纯函数组件)

有状态组件

通过 React.createClass 或者 es6 的 class 继承 React.Component 创建的组件。特性:具备完整的生命周期及实例化过程、支持 this 及 ref 指向。

无状态组件:

即 statelesscomponent(pure function Component)。以函数返回值方式方式创建的组件。特点:无实例化过程及生命周期、无 this 及 ref 指向、函数接受 props 及 context 两个参数。

实践模式

创建多个只负责渲染数据的无状态(stateless)组件,在他们的上层创建一个有状态(stateful)组件并把它的状态通过 props 传给子级。有状态的组件封装了所有的用户交互逻辑,state 中处理状态的变化, 而这些无状态组件只负责声明式地渲染数据。

react.png

三. 受控组件、非受控组件及混合组件

有许多的 web 组件可以被用户的交互发生改变,比如:<input>,<select>。这些组件可以通过输入一些内容或者设置元素的 value 属性来改变组件的值。但是,因为 React 是单向数据流绑定的,这些组件可能会变得失控:

  • 1.一个维护它自己 state 里的 value 值的 <Input> 组件无法从外部被修改
  • 2.一个通过 props 来设置 value 值的 <Input> 组件只能通过外部控制来更新。

受控组件:

一个受控的 <input> 应该有一个 value 属性。渲染一个受控的组件会展示出 value 属性的值。

一个受控的组件不会维护它自己内部的状态,组件的渲染单纯的依赖于 props。也就是说,如果我们有一个通过 props 来设置 value 的 <input> 组件,不管你如何输入,它都只会显示 props.value。换句话说,你的组件是只读的。

在处理一个受控组件的时候,应该始终传一个 value 属性进去,并且注册一个 onChange 的回调函数让组件变得可变。

非受控组件

一个没有 value 属性的 <input> 就是一个非受控组件。通过渲染的元素,任意的用户输入都会被立即反映出来。非受控的 <input> 只能通过 onChange 函数来向上层通知自己被用户输入的更改。

混合组件

同时维护 props.value 和 state.value 的值。props.value 在展示上拥有更高的优先级,state.value 代表着组件真正的值。

目的:

  • 1、支持传入值; 
  • 2、可控:组件外部修改props可改变input组件的真实值及显示值; 
  • 3、非可控:输入框中输入值,可同时改变input组件的真实值及显示值。

react.jpg

四. redux 和 dva

Redux

Actions、Reducers 和 Store

action 可以理解为应用向 store 传递的数据信息(一般为用户交互信息)。在实际应用中,传递的信息可以约定一个固定的数据格式,比如: Flux Standard Action。 dispatch(action) 是一个同步的过程:执行 reducer 更新 state -> 调用 store 的监听处理函数。如果需要在 dispatch 时执行一些异步操作(fetch action data),可以通过引入 Middleware 解决。

reducer 实际上就是一个函数:(previousState, action) => newState。用来执行根据指定 action 来更新 state 的逻辑。reducer 不存储 state, reducer 函数逻辑中不应该直接改变 state 对象, 而是返回新的 state 对象。

store 是一个单一对象,redux 中只有唯一一个 store 实例。主要作用:

  • 1.管理应用的 state
  • 2.通过 store.getState() 可以获取 state
  • 3.通过 store.dispatch(action) 来触发state 更新
  • 4.通过 store.subscribe(listener) 来注册state 变化监听器

react.png

Dva

数据流向

数据的改变发生通常是通过用户交互行为或者浏览器行为(如路由跳转等)触发的,当此类行为会改变数据的时候可以通过 dispatch 发起一个action,如果是同步行为会直接通过 Reducers 改变 State ,如果是异步行为(副作用)会先触发 Effects 然后流向 Reducers 最终改变 State,所以在 dva 中,数据流向非常清晰简明,并且思路基本跟开源社区保持一致(也是来自于开源社区)。

react.png

Models

State

type State = any

State 表示 Model 的状态数据,通常表现为一个 javascript 对象(当然它可以是任何值);操作的时候每次都要当作不可变数据(immutabledata)来对待,保证每次都是全新对象,没有引用关系,这样才能保证 State 的独立性,便于测试和追踪变化。

在 dva 中你可以通过 dva 的实例属性 _store 看到顶部的 state 数据,但是通常你很少会用到:

constapp=dva();
console.log(app._store); // 顶部的 state 数据

Action

typeAsyncAction = any

Action 是一个普通 javascript 对象,它是改变 State 的唯一途径。无论是从 UI 事件、网络回调,还是 WebSocket 等数据源所获得的数据,最终都会通过 dispatch 函数调用一个 action,从而改变对应的数据。action 必须带有 type 属性指明具体的行为,其它字段可以自定义,如果要发起一个 action 需要使用 dispatch 函数;需要注意的是 dispatch 是在组件 connect Models以后,通过 props 传入的。

dispatch({
  type: 'add',
});

dispatch 函数

typedispatch = (a: Action) => Action

dispatching function 是一个用于触发 action 的函数,action 是改变 State 的唯一途径,但是它只描述了一个行为,而 dipatch 可以看作是触发这个行为的方式,而 Reducer 则是描述如何改变数据的。

在 dva 中,connect Model 的组件通过 props 可以访问到 dispatch,可以调用 Model 中的 Reducer 或者Effects,常见的形式如:

dispatch({
  type:'user/add', // 如果在 model 外调用,需要添加 namespace
  payload: {}, // 需要传递的信息
});

Reducer

typeReducer<S, A> = (state: S, action: A) => S

Reducer(也称为 reducing function)函数接受两个参数:之前已经累积运算的结果和当前要被累积的值,返回的是一个新的累积结果。该函数把一个集合归并成一个单值。

Reducer 的概念来自于是函数式编程,很多语言中都有 reduce API。如在 javascript 中:

[{x:1},{y:2},{z:3}].reduce(function(prev, next){
    returnObject.assign(prev, next);
})
//return {x:1, y:2, z:3}

在 dva 中,reducers 聚合积累的结果是当前 model 的 state 对象。通过 actions 中传入的值,与当前 reducers 中的值进行运算获得新的值(也就是新的 state)。需要注意的是 Reducer 必须是纯函数,所以同样的输入必然得到同样的输出,它们不应该产生任何副作用。并且,每一次的计算都应该使用 immutabledata,这种特性简单理解就是每次操作都是返回一个全新的数据(独立,纯净),所以热重载和时间旅行这些功能才能够使用。

Effect

Effect 被称为副作用,在我们的应用中,最常见的就是异步操作。它来自于函数编程的概念,之所以叫副作用是因为它使得我们的函数变得不纯,同样的输入不一定获得同样的输出。

dva 为了控制副作用的操作,底层引入了 redux-sagas 做异步流程控制,由于采用了 generator 的相关概念。所以将异步转成同步写法,从而将 effects 转为纯函数。至于为什么我们这么纠结于 纯函数,如果你想了解更多可以阅读 Mostlyadequate guide to FP,或者它的中文译本 JS 函数式编程指南

Subscription

Subscriptions 是一种从 源 获取数据的方法,它来自于 elm。

Subscription 语义是订阅,用于订阅一个数据源,然后根据条件 dispatch 需要的 action。数据源可以是当前的时间、服务器的 websocket 连接、keyboard 输入、geolocation 变化、history 路由变化等等。

importkeyfrom'keymaster';
...
app.model({
  namespace:'count',
  subscriptions: {
    keyEvent(dispatch) {
      key('⌘+up, ctrl+up', () => { dispatch({type:'add'}) });
    },
  }
});

Router

这里的路由通常指的是前端路由,由于我们的应用现在通常是单页应用,所以需要前端代码来控制路由逻辑,通过浏览器提供的 HistoryAPI 可以监听浏览器 url 的变化,从而控制路由相关操作。

dva 实例提供了 router 方法来控制路由,使用的是 react-router

RouteComponents

在组件设计方法中,我们提到过 Container Components,在 dva 中我们通常将其约束为 Route Components,因为在 dva 中我们通常以页面维度来设计 Container Components。

所以在 dva 中,通常需要 connect Model 的组件都是 Route Components,组织在 /routes/ 目录下,而 /components/ 目录下则是纯组件(Presentational Components)。

五. hoc

HOC(全称 Higher-ordercomponent)是一种 React 的进阶使用方法,主要还是为了便于组件的复用。HOC 就是一个方法,获取一个组件,返回一个更高级的组件。

在 React 开发过程中,发现有很多情况下,组件需要被“增强”,比如说给组件添加或者修改一些特定的 props,一些权限的管理,或者一些其他的优化之类的。而如果这个功能是针对多个组件的,同时每一个组件都写一套相同的代码,明显显得不是很明智,所以就可以考虑使用 HOC。

一个最简单的HOC实现是这个样子的:

react.png

HOC 可以做什么?

  • 代码复用,代码模块化
  • 增删改 props
  • 渲染劫持

增删改 props

可以通过对传入的props进行修改,或者添加新的 props 来达到增删改 props 的效果。

比如你想要给 wrappedComponent 增加一个 props,可以这么搞:

react.png

这样,你就可以在你的组件中使用 message 这个 props:

react.png

渲染劫持

这里的渲染劫持并不是你能控制它渲染的细节,而是控制是否去渲染。由于细节属于组件内部的 render 方法控制,所以你无法控制渲染细节。

比如,组件要在 data 没有加载完的时候,现实 loading...,就可以这么写:

react.png

这个样子,在父级没有传入 data 的时候,这一块儿就只会显示 loading...,不会显示组件的具体内容

react.png

六. 项目中的实践

  • 1、合理使用有状态组件及无状态组件。在使用 redux 或者 dva 的场景下,理论上所有的组件都可以封装为无状态组件(少数需要生命周期控制或者上文提到的混合式组件除外),model 中封装数据、异步 effects 及同步 reducers,通过 connect 绑定到对应的组件上。

最佳实践:router 中 getcomponent 中定义的组件我们称之为路由组件,一般路由组件会通过 connect 绑定 model 中定义的 state 及组件中定义的方法到该组件的 props 上。其他方式定义的为非路由组件,非路由组件尽量避免使用 connect,而是通过路由组件或者其他上层通过 props 传递数据进行渲染。

  • 2、理解 subscription、effects 及 reducers 中各自的功能职责。
  • 3、package.json 中定义的 dependency,需要深入研究,避免重复造轮子。
  • 4、全局观及合理的组件规划。
发表我的评论
icon_mrgreen.gificon_neutral.gificon_twisted.gificon_arrow.gificon_eek.gificon_smile.gificon_confused.gificon_cool.gificon_evil.gificon_biggrin.gificon_idea.gificon_redface.gificon_razz.gificon_rolleyes.gificon_wink.gificon_cry.gificon_surprised.gificon_lol.gificon_mad.gificon_sad.gificon_exclaim.gificon_question.gif

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址