React学习笔记

发表于 | 分类于 |

图片标题

导语

什么是React？Vue跟React相比的区别是哪些？为什么大厂都会选择React？

区别

  • 设计模式
  • 组件写法不同；
    • react主张jsx+inline style,也就是讲HTML、css写到js中，一切皆js；
    • vue则是webpack+Vue-loader的单文件组件格式，即HTML、css、js组成一个文件形成.vue文件
  • 数据绑定
    • 两者都是单向数据流，但是Vue可以进行双向数据绑定，React也可以进行双向数据绑定，但是绑定的原理有些区别，React是通过setState与View层进行双向数据绑定达到实时更新变化
  • Vitual Dom 不一样；
    • Vue会跟踪每一个组件的依赖关系，不需要重新渲染整个组件树，而react每当应用的状态被改变时，全部组件都会被渲染，所以react需要shouldComponentUpdate这个生命周期函数方法来进行控制

注： 关于vue的数据双向绑定和单向数据流

  • Vue 的依赖追踪是【原理上不支持双向绑定，v-model 只是通过监听 DOM 事件实现的语法糖】
  • Vue的依赖追踪是通过 Object.defineProperty 把data对象的属性全部转为 getter/setter来实现的；当改变数据的某个属性值时，会触发set函数,获取该属性值的时候会触发get函数，通过这个特性来实现改变数据时改变视图；也就是说只有当数据改变时才会触发视图的改变，反过来在操作视图时，只能通过DOM事件来改变数据，再由此来改变视图，以此来实现双向绑定
  • 双向绑定是在同一个组件内，将数据和视图绑定起来，和父子组件之间的通信并无什么关联；
  • 组件之间的通信采用单向数据流是为了组件间更好的解耦，在开发中可能有多个子组件依赖于父组件的某个数据，假如子组件可以修改父组件数据的话，一个子组件变化会引发所有依赖这个数据的子组件发生变化，所以vue不推荐子组件修改父组件的数据，直接修改props会抛出警告

React

DEMO

React 示例

搭建React

  • 安装create-react-app

    1
    npm isntall -g create-react-app

  • 查看版本

    1
    create-react-app --version

  • 创建项目目录
    图片标题

  • 安装完成之后（红线标识的是运行的时候的默认配置）
    图片标题
  • 运行yarn start
    图片标题
    • 自动运行浏览器，打开localhost:3000页面
      图片标题

运行默认配置

打开项目代码，其中package.json中script标签的eject命令是默认安装webpack等一些基础的配置

图片标题
图片标题

会增加一个scripts文件夹和一个config文件夹存放一些配置文件

图片标题

Config for yourself

项目目录地址：
码云：https://gitee.com/houchaowei/flash.git

  • 按照vue的开发习惯配置了一些简单的目录
  • 没有加redux，加了MOBX

服务器端项目的部署

  • 首先安装nginx，npm，node，配置项目目录，配置nginx代理
  • clone代码到项目目录
1
git clone https://houchaowei:**@gitee.com/houchaowei/flash.git

图片标题

  • 解析一个二级域名，没有配置nginx代理的时候，访问不到的项目
    图片标题
  • nginx配置
    title
  • 项目目录下执行npm install & npm run build
    title

React示例：

Demo

title

index.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
/**
* index.js
*/
import React, { Component } from 'react'
import { observer, inject } from 'mobx-react'
import {
    Button,
    InputItem
} from 'antd-mobile'

@inject('store')
@observer
class Index extends Component {
    constructor(props) {
        super(props)

        this.state = {

        }
    }

    changeName = () => {
        this.props.store.setName('小吴')
    }

    render() {
        return (
            <div>
                <InputItem value={this.props.store.name} type='primary'>姓名</InputItem>
                <Button onClick={this.changeName}>修改名字</Button>
            </div>
        )
    }
}

export default Index

store.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/**
* store.js
*/
import {observable, action} from "mobx";

class CommonState {
    @observable name = '小红';
    
    @action setName (name) {
        this.name = name;
    }
}

export default CommonState