深入浅出react

1，新建项目

为了方便安装一个初始化简单的react组件，我们可以先通过npm 来安装create-react-app

npm install --global create-react-app

create-react-app first_react_app

注意：create-react-app默认的是npm镜像由于npm属于国外镜像，有时候安装会很慢。解决办法

通过换源：npm config set registry https://registry.npm.taobao.org 默认设成淘宝镜像

检验是否换源成功：npm info express或者npm config get registry

启动项目

npm start

1.2增加一个新的 React组件

import React, { Component } from 'react';

class ClickCounter extends Component {
  constructor(props) {
    super(props)
    this.onClickButton = this.onClickButton.bind(this);
    this.state = { count: 0 }
  }
  onClickButton() {
    this.setState({
      count: this.state.count + 1
    })

  }
  render() {
    const { count } = this.state
    return (
      <div>
        <div>
          <button onClick={this.onClickButton}>大师马快点我</button>
        </div>
        <p>
          你点了{count}次
          </p>
      </div>

    )
  }
}
export default ClickCounter

　1.3 react工作方式

实现一个点击计数事件jq是如何工作的 (我就不上代码了就是jq的基本点击事件)

在 jQuery 的解决方案中，首先根据 css 规则找到 id 为 clickCount 的按钮，挂上一个匿名事件处理函数，在事件处理函数中，选中那个需要被修改的 DOM 元素，读取其中的文本值，加以修改，然后修改这个 DOM 元素。选中一些 DOM 元素，然后对这些元素做一些操作，这是一种最容易理解的开发模式。 jQuery 的发明人 John Resig 就是发现了网页应用开发者的这个编程模式，才创造出了 jQuery，其一问世就得到普遍认可，因为这种模式直观易懂。但是，对于庞大的项目，这种模式会造成代码结构复杂，难以维护，每个 jQuery 的使用者都会有这种体会。

打一个比方， React是一个聪明的建筑工人，而 jQuery是一个比较傻的建筑工人，开发者你就是一个建筑的设计师，如果是 jQuery 这个建筑工人为你工作，你不得不事无巨细地告诉 jQuery“如何去做”，要告诉他这面墙要拆掉重建，那面墙上要新开一个窗户，反之，如果是 React这个建筑工人为你工作，你所要做的就是告诉这个工人“我想要什么样子”，只要把图纸递给 React这个工人，他就会替你搞定一切，当然他不会把整个建筑拆掉重建，而是很聪明地把这次的图纸和上次的图纸做一个对比，发现不同之处，然后只去做适当的修改就完成任务了。

显而易见， React 的工作方式把开发者从繁琐的操作中解放出来，开发者只需要着重 “我想要显示什么”，而不用操心“怎样去做” 。

这种新的思维方式，对于一个简单的例子也要编写不少代码，感觉像是用高射炮打蚊子，但是对于一个大型的项目，这种方式编写的代码会更容易管理，因为整个 React 应用要做的就是渲染，开发者关注的是渲染成成什么样子，而不用关心如何实现增量渲染。

React 的理念，归结为一个公式，就像下面这样 : UI=render(data)

让我们来看看这个公式表达的含义，用户看到的界面( UI)，应该是一个函数(在这里叫 render)的执行结果，只接受数据( data)作为参数。这个函数是一个纯函数，所谓纯函数，指的是没有任何副作用，输出完全依赖于输入的函数，两次函数调用如果输人相同，得到的结果也绝对相同。如此一来，最终的用户界面，在 render 函数确定的情况下完全取决于输入数据。

对于开发者来说，重要的是区分开哪些属于 data，哪些属于 render，想要更新用户界面，要做的就是更新 data，用户界面自然会做出响应，所以 React实践的也是“响应式编程”( Reactive Programming)的思想，这也就是 React 为什么叫做 React 的原因。

猜你喜欢