react小记

反派君
58 阅读3分钟

函数式组件

react是一个由多个组件组成的web工程或者app，而这些组件都是通过一个函数对象组成的，例如

React.createClass({
   render:function(){
     return <div>hello</div> 
   } 
})

这是一个es5的写法，也是我最初接触时使用的手法。通过声明reactClass注册组件，通过render定义组件的jsx。

目前我的理解是：无论是es5的createClass亦或是es6的class，其组件核心在于，创建一个构造函数，这个构造函数中的成员定义了组件的视图、行为、状态、生命周期、再通过jsx和react-dom结合渲染，实现函数式组件。

更通俗的理解我觉得是，每一个组件其实都是一个类，这个类继承了react的核心，通过重写定义组件。这里使用web说明：

image.png

这就是我认识到的react的基本组成。  

难点，状态管理

　　react的难点之一是状态管理，好在还有Flux，redux，这些解决方案，得益于大公司（facebook）的明星效应，react的社区活跃度很高（但是我很少看到比较高质量的中文react解决方案），这类的难点解决方案总会有很多选择。鉴于redux的流行程度，国内大多数应该都是它了吧，甚至据我所知，react在国内的使用程度比不上vue、angular。

　　还是谈谈我对状态管理的理解；这里不提redux等解决方案，我们往往需要先搞清楚为什么要用解决方案，再去用解决方案。

前面提到了函数式组件，一般我们做项目的时候，一个组件不会仅仅满足于返回一个静态dom，我们需要能够管理组件的刷新、更改、ajax查询等。

react中引入了一个叫做getInitialState的方法，它就是用来定义组件的状态，这个方法在不同的js版本中有不同的实现：

es5:

React.createClass({
    getInitialState:function(){
      return {
          text:"hello world"
       }     
    },
    render(){
        return <div>{this.state.text}</div> 
    }
})

es6:

import React,{Component} from "react";
class Hello extends Component{
   constructor(props){
    super(props);
    this.state={
        text:"hello World"
    }
  }
   render(){
        return <div>{this.state.text}</div>  
    }
}

如果你看babel打包后的代码，通过打包后的代码也可以看出es6转换成 getInitialState声明形式。

该如何理解组件状态呢？ 

这样看其实更简单，简单来说组件hello有一些组件属性，例如props、state。 state是实时管理组件，用什么样的样子显示到webview中的决定属性。

对这样一个组件来说，这样其实很简单了。但是想想一个页面可以拆分成多少个组件，这么多组件在一起组合、嵌套，你想想每个组件都有一个自己的state，如果外面的组件要控制里面的组件呢？a组件要控制b组件呢？，复杂程度立刻变为困难模式。但是刀山火海总会填平的，这就是redux解决的问题。

然而伴随redux而来的，是一堆贴着标签的，嘴角还露着尖尖的邪笑的丧尸大军，哦，那是更多的技术栈体系。。。。。。

avatar
文章
阅读
粉丝