美文网首页
再探React

再探React

作者: CenturyGuo | 来源:发表于2016-12-20 12:54 被阅读52次

    早在一年前,我就很蠢发表过一篇关于React的文章,这篇文章主要根据React官方的介绍初步介绍一下React,并稍微带过一下Webpack,当时只是作为一位iOS开发工程师随便看看React这个东西,现在博主已经励志从一名懂一点Javascript的iOS程序员转变成一位曾经做过iOS的前端开发人员,在自己做过一些React项目之后,想再次介绍一下React这个东西

    那么让我们来回顾一下React的基本用法,在某个版本之后React这个库被分为react和react-dom,react负责对组件的操作,react-dom负责将组件渲染到页面上,组件的写法基本为:

    var MyComponent = React.createClass({
      render: function() {
        return React.createElement("div", null);
      }
    })
    

    使用JSX语法之后

    var MyComponent = React.createClass({
      render: function() {
        return (
          <div>
            <!-- add some dom code -->
          </div>
        )
      }
    })
    

    使用ES6的语法来写:

    class MyComponent extends React.Component {
      render() {
        return (
          <div>
            <!-- add some dom code -->
          </div>
        )
      }
    }
    

    在Babel横行的当今,我是推荐至少要使用JSX的语法来编写React的,这样会使得代码的可读性更强,至于ES6就靠个人洗好了,本文还是推荐使用ES6的语法的,也将使用ES6语法完成大部分代码的示例

    随便说说生命周期

    关于组件的装载,按照顺序执行下面的方法

    constructorcomponentWillMountrendercomponentDidMount

    关于组件的更新,按照顺序执行下面的方法

    componentWillReceivePropsshouldComponentUpdatecomponentWillUpdaterendercomponentDidUpdate

    关于组件卸载的

    componentWillUnmount

    英语好的看名字就知道是干嘛的了,真的,应该不用解释了

    这里稍微提及一下就是在使用ES6的时候,定义class如下代码:

      class A extends React.Component {
        custom() {
    
        }
        render() {
          console.log(this.custom)
          return (
            <div>
              <A customProp="custom"/>
            </div>
          )
        }
      }
    

    此处输出this.custom的时候会显示undefined,因为class的非constructor方法都是prototype,可以在this._proto_中访问到,如果想要比较友好的使用this.custom,可以使用auto-bind

    React组件核心的两个属性分别叫做props和state,这两个属性其实就是存储了一系列数据,props的数据主要从组件外部传入,比如

      class A extends React.Component {
        render() {
          const {customProp} = this.props
          console.log(customProp)
          return (
            <div></div>
          )
        }
      }
      class B extends React.Component {
        render() {
          return (
            <div>
              <A customProp="custom"/>
            </div>
          )
        }
      }
    

    以上就会输出customProp的值为custom

    而state的值则是由组件内部控制的,state应当在constructor的实现中初始化,并在React中调用setState()组件会做diff并刷新相应界面,所以我们能够确定props对于组件内部是静态的,它从外部传入,由外部控制组件。而state是动态的,组件自己控制自己。

    了解了以上的知识,基本的React项目已经可以编写了,当然,只要配置好Webpack,关于项目的搭建,之前已经有过一篇文章对其进行过翻译

    那么接下来讲讲一些进阶吧

    Redux

    首先呢,Redux不是只用于React的。当然了React和它很搭,React是一个状态维护组件的界面框架,而Redux恰好是一个非常好的能够维护状态的框架。接下来对Redux做一些介绍,Redux只适用于超大型项目,轻易别用这个东西,很累赘。

    那么我们从基础的来看Redux

    Action

    Action相当于指令,一般会包含两种属性一种是指令类型,用以区分指令,另一种是数据,数据可以有很多,用来处理,当然也可以没有数据单纯发一个指令,这都是可选的,比如以下都是Action:

    const OPEN_MOUTH = "OPEN_MOUTH"
    const CLOSE_MOUTH = "CLOSE_MOUTH"
    const openAction = {
      type: OPEN_MOUTH,
      size: 10,
      time: 5
    }
    const closeAction = {
      type: CLOSE_MOUTH
    }
    

    上面一共有两个Action,OPEN_MOUTHCLOSE_MOUTH分别是两个类型,openAction中的size和time是数据,closeAction中没有数据

    Reducer

    Reducer是指令的处理器,用于分类处理指令,先上一段代码:

    function myReducer(state, action) {
      if (action.type == OPEN_MOUTH) {
        var newState
        //create a new State for open mouth
        return newState
      } else if (action.type == CLOSE_MOUTH) {
        var newState
        //create a new State for close mouth
        return newState
      }
    }
    

    这就是一个Reducer,可以看到,这个Reducer接受两个参数,一个是原来的state,一个是action,也就是我们的指令,通过指令的类型和指令的数据来产生新的state就是Reducer的任务。
    这里需要注意,Redux开发过程中,在Reducer处理的时候都是期望state纯净的,也就是说,产生的新的state不会修改老的state,所以请巧用Object.assign()concat()等函数经行操作

    Store

    可以通过createStore来创建新的store对象,store对象主要的功能是发送Action,和监控整个发送处理过程

    let store = createStore(myReducer, {})
    store.dispatch(openAction)
    

    createStore第一个参数为Reducer,第二个参数是初始的state值
    dispatch方法发送Action

    以上就是最简单的Redux的用法,想了想其实就是很简单的东西,如果要我们自己来实现的话我们也可以来演示一遍,主要就是实现一个store

    var createStore = (reducer, init) => {
      var store = {}
      var state = init
      var listeners = []
      store.dispatch = (action) => {
        state = reducer(state, action)
        listeners.forEach((listener) => {
          listener()
        })
      }
      store.getState = () => {
        return state
      }
      store.subscribe = (listener) => {
        let count = listeners.push(listener)
        return () => {
          listeners.slice(count - 1, 1)
        }
      }
      return store
    }
    

    以上就是createStore的大致实现,很简单对不对,所以如果只是想用这个Redux的功能,完全可以用这么点代码代替,不用使用一整个Redux的库,杀鸡焉用牛刀

    那么我们来继续介绍一些,Redux还有哪些Api

    combineReducers

    随着项目越来越复杂,一个Reducer处理的数据就会越来越多,比如针对如下的数据:

    {
      user: {
        name: 'goodname',
        sex: 1
      },
      setting: {
        showing: false,
        count: 100
      }
    }
    

    当我们修改user的时候其实setting根本没有被修改,随着同级的属性的增多,把所有的属性的操作都放入一个reducer,代码难免会有一些杂乱,那么我们就会把Reducer拆分,让单个Reducer来处理单个同级属性,combineReducers就帮我们很好的处理了这件事情。比如针对上面的数据,我们之前会这么做

    var reducer = (state, action) => {
      if (action.type == CHANGE_NAME) {
    
      } else if (action.type == CHANGE_SEX) {
    
      } else if (action.type == SHOWING) {
    
      } else if (action.type == HIDE) {
    
      }
    }
    

    同级属性再增多,都会把所有的操作都放在这个函数中,是不好的,有了combineReducers,我们可以这么做:

    var user = (state, action) => {
      if (action.type == CHANGE_NAME) {
    
      } else if (action.type == CHANGE_SEX) {
    
      }
    }
    
    var setting = (state, action) => {
      if (action.type == SHOWING) {
    
      } else if (action.type == HIDE) {
    
      }
    }
    
    module.exports = combineReducers({user, setting})
    

    这么做就会自动分发属性名对应的Reducer来处理了(当然对应关系可以自己设置)

    ////未完待续 -> redux-react

    相关文章

      网友评论

          本文标题:再探React

          本文链接:https://www.haomeiwen.com/subject/qdgxvttx.html