初识React

2017-01-10 本文已影响322人封小胖

今年9月，为了重构的项目，在一个星期内，我囫囵吞枣似地学习了React。

即便是4个月后的今天，回想起当日，我还是会记得5个小伙伴，每天晚上从7点半起，就准时到会议室里学习React的场景，不免又觉得有些好笑。

如今，重构的项目进入了最后的联调阶段，我也算是经过了实战的洗礼了，不过在探索React的路上跌跌撞撞，确没能留下半点记录，实属遗憾。

我决定将这四个月的经历整理整理，记录下来，已便将来更好的工作学习！

1、Why React?

这是我在项目初期一直在思考的问题，为什么重构的项目选择了 React 。

最初我是这么想的

追求时尚新技术，好耶，棒棒哒！

后来我发现了

健全的学习文档及良好的社区
github各种轮子
需要兼容IE8

再后来我觉得是

数据驱动视图
方便自定义UI

由于我们是第三方脚本，为了良好的兼容性，之前的脚本都是用 原生JS 。所以我对这么大的框架一下似乎也接受不了。

不过重构的负责人 XB 哥还是说服了我。

今日带宽不比往日
React@14做了拆分，可以有选择性的引用

加上我的内心也是向往新技术的。

经过了一段时间的使用，我觉得 React 确实有其独特之处，相较于 原生JS 的好处：

JSX语法，拥有清晰的dom结构和样式引用，带来与原生JS创建DOM不一样的体验
数据驱动视图，一定程度上简化了视图与逻辑分离的难度

下面就开始干货吧！

2、组件、state与props

Component 是 React 中重要的组成部分，大至整个页面，小到一个按钮，都有可能是一个组件。

而 state 与 props 则是一个组件绽放光彩的必备良药！

举个栗子：

import React, {Component} from "react";
import ReactDOM from "react-dom";

class SimpleComponent extends Component {

  constructor(props) {
    super(props)
  }

  render() {
    return <div>我只是我</div>
  }
}

ReactDOM.render(<SimpleComponent/>, document.getElementById('app'));

如此一来 SimpleComponent 组件的 render() 方法就将一个最简单的组件渲染到了网页上，这与html并没有什么区别，并不能展现 React 的强大威力！

下面我们使用 state 给这个 SimpleComponent 做做包装

import React, {Component} from "react";
import ReactDOM from "react-dom";

class SimpleComponent1 extends Component {
  constructor(props) {
    super();
    this.state = {
      content: '我就是我，那颜色不一样的烟火',
      color: '#F00'
    };
  }

  render() {
    let style = {
      color: this.state.color
    }

    return <p style={style}>{this.state.content}</p>
  }

  componentDidMount() {
    setInterval(() => {
      this.setState({
        color: this.state.color === '#F00' ? '#0F0' : '#F00'
      })
    }, 1000);
  }
}

ReactDOM.render(
  <div>
    <SimpleComponent/>
    <SimpleComponent1/>
  </div>,
  document.getElementById('app'));

在 componentDidMount() （React 组件自带方法，在第一次执行 render() 方法后执行，表示组件已经加载完毕）中采用 setState() 方法（ React 组件自带方法，能够设置 this.state 中属性的值）对 this.state 中的 color 属性进行设置，使得组件的颜色能够动态改变。

可以看到，利用 state ，我们可以轻松的实现 DOM 的渲染，而不需要直接操作 DOM，但是仅仅有 state ，似乎还缺少了些什么，我们还可以利用 props ，将这个组件更加的完善！

class SimpleComponent2 extends Component {
  constructor(props) {
    super(props);
    this.state = {
      content: this.props.content,
      color: '#F00'
    }
  }

  render() {
    let style = {
      color: this.state.color
    }

    return <p style={style}>{this.state.content}</p>
  }

  componentDidMount() {
    setInterval(() => {
      this.setState({
        color: this.state.color === '#F00' ? '#0F0' : '#F00'
      })
    }, 1000);
  }
}

ReactDOM.render(
  <div>
    <SimpleComponent/>
    <SimpleComponent1/>
    <SimpleComponent2 content="我就是我，颜色不一样的烟火"/>
    <SimpleComponent2 content="我也是烟火哦"/>
  </div>,
  document.getElementById('app'));

首先 props 是依赖外部传入的，如上代码 <SimpleComponent2 content="我也是烟火哦"/> 。

其次在 Component 中使用 props 是直接调用 this.props.属性名称 的。

了解清楚了 props 的用法，再来谈谈使用的必要性。

组件库（泛指如：按钮、日历，树，表格、列表、网格）等基础组件，编写的目的是为了方便使用的。

尽管上面举的例子并不复杂，然而如果我们需要在多个页面使用这个效果时，并不是在每个页面都写一个这样的组件。

而是提取出组件的共同点，找出他们的不同点，共同点利用 state 来实现，不同点利用 props 传入，来达到复用组件的目的

其实 state 与 props 的作用还不止这些，在后续的总结中，还有父子组件通信方面的作用。

3、写在文末

React 的故事才刚刚开始，接触React的时间也不算太长。如有描述不周的地方，请斧正，万分感谢。

初识React

1、Why React?

2、组件、state与props

3、写在文末

猜你喜欢

热点阅读