一段人人都应该知道的从Vue到React的过渡史

时间  2019-11-09
标签 一段 人人 应该 知道 vue react 过渡 栏目 React 繁體版
原文   原文链接

写在前面

之前写Vue写惯了，心血来潮，写起了React。并根据Vue官网文档的语法顺序，写了对应的React的语法，并附一个教程demo。javascript

教程的github地址：Close2Reactcss

项目使用框架版本主要有 react(15.4.1) + react-dom(15.4.1) + webpack(1.13.3) + axios(0.15.3) + node(6.2.2), 详情具体可见下文的【环境配置】html

目前该项目有两个分支, half-es6 + masterjava

half-es6和master实现的功能同样, 实现了CURD + Axios + Othersnode

half-es6的写法并无彻底使用es6的class的概念, master是完善了它react

环境配置

写react就须要先配置webpack还有jsxwebpack

首先，新建一个项目，npm initios

而后在package中加入下面这些依赖git

"dependencies": {
    "react": "^15.4.1",
    "react-dom": "^15.4.1",
  },
  "devDependencies": {
    "axios": "^0.15.3",
    "babel-core": "^6.18.2",
    "babel-loader": "^6.2.8",
    "babel-preset-es2015": "^6.18.0",
    "babel-preset-react": "^6.16.0",
    "babel-preset-react-hmre": "^1.1.1",
    "bootstrap": "^4.0.0-alpha.2",
    "css-loader": "^0.26.1",
    "file-loader": "^0.9.0",
    "html-webpack-plugin": "^2.24.1",
    "node-sass": "^3.13.0",
    "open-browser-webpack-plugin": "0.0.3",
    "sass-loader": "^4.0.2",
    "style-loader": "^0.13.1",
    "url-loader": "^0.5.7",
    "webpack": "^1.13.3",
    "webpack-dev-server": "^1.16.2"
  }复制代码

有两个比较重要的指令es6

"scripts": {
    "dev": "webpack-dev-server --progress --profile --hot",
    "build": "webpack --progress --profile --colors"
  },复制代码

webpack.config

在webpack的配置中，我想要的目录结构是横向目录(自创词 •༝•，即全部index页面要用到的东西，包括sass和js都写在index目录下,底下会有目录示意图)，目的是达到，我在src下编辑我想要的文件，打包后生成到public下去。
写在配置最前面的是路径的配置

var ROOT_PATH = path.resolve(__dirname);
var SRC_PATH = path.resolve(ROOT_PATH, 'src');
var PUBLIC_PATH = path.resolve(ROOT_PATH, 'Public');复制代码

配合着入口文件和输出文件的配置

entry: {
    index: path.resolve(SRC_PATH, 'index/index.js'),
},
output: {
    path: PUBLIC_PATH,
    filename: '[name].bundle.js',
},复制代码

主要的插件就是这个html生成的插件和自动打开浏览器的插件，还有babel的配置，无论三七二十一都把他们的等级开到最大

plugins: [
    new HtmlwebpackPlugin({
        title: 'My first react-webpack'
    }),
    new OpenBrowserPlugin({
        url: 'http://localhost:8200'
    })
],
babel: { //配置babel
    "presets": ["es2015",'stage-0', 'react'],
},复制代码

npm run dev，会自动打开localhost:8200,就能够在浏览器上看到初始化的页面

jsx

当你开始要写js的时候发现，怎么这么多警告，

不用担忧 google 一下都能解决。

在这里下载react 和 react-native：

并勾选对应项，保存：

警告会少不少，可是仍是有一些警告，怎么办呢

点击这个小灯泡，而后选择configure

把这两项勾选掉，保存，就一片清净了。

项目描述

Public是打包后生成的目录，src是写目录

src采用横向目录结构(自创词 •༝•)，即全部index页面要用到的东西，包括sass和js都写在index目录下。

指令运行项目

npm i

npm run build 生成打包后的文件

npm run dev

数据绑定

1 文本插值

<span>{text}</span>

2 html 插值

<div dangerouslySetInnerHTML={{__html: "<p>balabalabalabala.......</p>"}} />

3 属性赋值

<span id = {this.props.idName}></span>

<span className = "nav-box"></span>

4 带js表达式的插值 xxx = {三元表达式}

<span className={this.props.idx == this.props.choice? "tab on" : "tab"} ></span>

5 事件绑定

事件绑定和属性绑定同样

// 若是没有使用class继承的写法的话
getInitialState() {
    return {
        tabTxt: ['CURD', 'Axios', 'Others'],
        choice: 0,
    }
},

switchChoice(idx){
        this.setState({
            choice: idx
        })
    },

renderTabInit(text, idx) {
    return (<Tab key={idx} idx={idx} choose={this.switchChoice} // 绑定了switchChoice方法 choice={this.state.choice} // 数据data的绑定，this.state能够获取到整个state >{text}</Tab>)
},复制代码

有可能会遇到一些BOOM爆炸的bug，请看react父子组件间的事件绑定

css和style的绑定

1 className

className={this.props.idx == this.props.choice? "tab on" : "tab"}

2 style

第一个括号是插值，第二个括号表示style对象

style={{color: '#FEC264', fontSize: '40px'}}


列表渲染 & 条件渲染

在getInitalState中定义了一个数组tabTxt

getInitialState() {
        return {
            tabTxt: ['CURD', 'Axios', 'Others'],
            choice: 0,
        }
    },复制代码

循环渲染这个子组件，每一个子组件有本身的惟一的key，做用和track-by（或v-bind:key）的做用相似

renderTabInit(text, idx) {
        return (<Tab key={idx} idx={idx} choose={this.switchChoice} choice={this.state.choice} >{text}</Tab>)
    },复制代码

列表渲染的v-for 在react中使用map

v-if 的条件渲染可用三元，如复杂判断则须要在return前写逻辑代码

render() {
    let currentPage = null;
    if(this.state.choice == 0) {
        currentPage = <PageA /> } else if (this.state.choice == 1){ currentPage = <PageB /> } else { currentPage = <PageC /> } return ( <div id="content"> <div id="navBox"> {this.state.tabTxt.map(this.renderTabInit)} </div> <div id="pageBox"> {currentPage} </div> </div> ) }复制代码

表单控件

表单组件有几个受用户影响的属性：

value，用于input、textarea组件

checked， 用于类型为 checkbox 或者 radio 的 input 组件

selected，用于option组件

每一个表单控件都有一个onChange事件用来监听组件的变化:

当 input 或 textarea 的value 发生变化时

input 的 checked 状态改变时

option 的 selected 状态改变时

受限组件：

//es5
    render: function() {
        return <input type="text" value="Hello!" />; } // 在渲染出来的元素里输入任何值都不起做用，由于 React 已经赋值为 Hello!复制代码

若是要让用户修改的值有用，则须要：

getInitialState() {
    return {value: 'Hello!'};
  },
  handleChange(event) {
    this.setState({value: event.target.value});
  },
  render() {
    let value = this.state.value;
    return <input type="text" value={value} onChange={this.handleChange} />; }复制代码

不受限组件：

//es5
   render: function() {
      return (
          <div>
            <input type="radio" name="opt" defaultChecked /> Option 1
            <input type="radio" name="opt" /> Option 2
            <select defaultValue="C">
              <option value="A">Apple</option>
              <option value="B">Banana</option>
              <option value="C">Cranberry</option>
            </select>
          </div>
      );
    }    
    // 用户输入将当即反应到元素上。
    // 和受限元素同样，使用 onChange 事件能够监听值的变化。
    // default 有一个初始值，但这个值用户能够改变并会反应到界面上。复制代码

父子组件通讯

父子组件通讯

// 父组件，至关于最大的组件
// 子组件是一个tab，和三个page，切换tab 就能切换 page
const Content = React.createClass({
    getInitialState() {
        return {
            tabTxt: ['CURD', 'Axios', 'Others'],
            choice: 0, // 当前选中的tab下标
        }
    },

    switchChoice(idx){
        this.setState({ // 修改state 
            choice: idx
        })
    },

    renderTabInit(text, idx) {
        return (<Tab key={idx} idx={idx} choice={this.state.choice} // key\idx\choice 分别都是做为props传入tab子组件的参数名 choose={this.switchChoice} // choose 做为props做为传入tab子组件的方法名 >{text}</Tab>)
    },

    render() {
        let currentPage = null;
        if(this.state.choice == 0) { // 条件判断
            currentPage = <PageA /> } else if (this.state.choice == 1){ currentPage = <PageB /> } else { currentPage = <PageC /> } return ( <div id="content"> <div id="navBox"> {this.state.tabTxt.map(this.renderTabInit)} //循环输出 </div> <div id="pageBox"> {currentPage} </div> </div> ) } });复制代码

在使用事件绑定choose={this.switchChoice} 的时候，由于没有采用class的学法因此不用bind

class的写法的时候须要bind: choose={this.switchChoice.bind(this)}

不用class的写法的时候不绑定不会致使子组件的this指向错误，若是绑定了还会报错（如绑定this会有警告）

使用了class的写法的时候则须要手动bind, 这个在文章最后会详细解说 

// tab 子组件
const Tab = React.createClass({
    chooseTab() {
        this.props.choose(this.props.idx); //必定要将父组件的方法在子组件中作一个中转
    },

    render(){
        return (
            <span className={this.props.idx == this.props.choice? "tab on" : "tab"} style={{color: '#FEC264', fontSize: '40px'}} data-idx={this.props.idx} onClick={this.chooseTab} // 调用子组件的方法 >{this.props.children}</span>
        )
    }
});复制代码

获取dom元素

当你的组件尚未挂载在容器上，能够用this.refs访问

已经挂载完毕，经过react-dom提供findDOMNode方法拿到组件对应的dom

另外：

若是ref是设置在原生HTML元素上，它拿到的就是DOM元素;

若是设置在自定义组件上，它拿到的就是组件实例，这时候就须要经过 findDOMNode来拿到组件的DOM元素。

//es5
var MyComponent = React.createClass({
  handleClick: function() {
    this.refs.myTextInput.getDOMNode().focus(); // 经过this.refs.xxxxx拿到元素
  },
  render: function() {
    return (
      <div>
        <input type="text" ref="myTextInput" /> // 给输入框命名ref 
        <input
          type="button"
          value="Focus the text input"
          onClick={this.handleClick}
        />
      </div>
    );
  }
});复制代码

几个经常使用api

componentDidMount

componentWillReceiveProps(nextProps)

花一分钟,改为正统的class写法

第一步，把全部createClass 换成 class xxx extends Component

咱们用一半的es6的姿式写出来的代码以下：

// half-es6
import React from 'react';
const List = React.createClass({ // 用createdClass建立一个组件
    getInitialState() { // 初始化数据state 
        return { // 在函数的return里定义state
            status: false, 
        }
    }, // 这里必定写逗号
    saveLiValue() { // 组件内要调用的function
        this.setState({
            status: false
        })
    },
    ....
})复制代码

咱们用完整的es6的姿式写出来的代码以下：

// master
// 利用class姿式的es6
import React, {Component} from 'react';
class List extends Component{
    constructor(props){
        super(props);
        this.state = { 
            status: false, 
        }
    } // 没有逗号

    saveLiValue() {
        this.setState({
            status: false
        })
    }
    ....
}复制代码

第二步，在父组件中，给全部须要传递给子组件的方法加bind(this)

这句话有点绕口，但必定要理解。

一、第一层意思是在父组件上加bind(this)

二、加的目的是防止子组件在调用方法的时候this指向错误

例以下面这个初始化列表的函数

// half-es6
// 若是在这种写法下bind(this)，编译后的页面会报警告
// 大概是说react已经提供了丰富的方法能够避免指向错误，不须要手动bind
initListLi(val, idx) {
    return (
        <List {...val} key={idx} index={idx}
              handleTxtChange={this.handleTxtChange}
              handleCheckChange={this.handleCheckChange}
              deleteItem={this.deleteItem}
        />
    )
},

render() {
    return (
        <article className="page">
            <h3 className="h3">List总条数: {this.state.list.length}</h3>
            <h3 className="h3">目前完成条数: {this.state.didCount}</h3>
            <ul className="ul">
                {
                    this.state.list.map(this.initListLi)
                }
            </ul>
            <Add addLiItem={this.addLiItem}/>
        </article>
    )
}复制代码

可是使用了class的写法以后，就可能会出现警告说 props 是null

这个时候就须要手动bind(this)

// master
// es6的class写法下的函数的事件绑定，
// 若是子组件会须要调用函数，则在父组件中手动向子组件中bind(this)
initListLi(val, idx) {
    return (
        <List {...val} key={idx} index={idx}
              // 如下三个方法都是在向List组件中绑定this
                handleTxtChange={this.handleTxtChange.bind(this)} 
              handleCheckChange={this.handleCheckChange.bind(this)}
              deleteItem={this.deleteItem.bind(this)}
        />
    )
}

render() {
    return (
        <article className="page">
            <h3 className="h3">List总条数: {this.state.list.length}</h3>
            <h3 className="h3">目前完成条数: {this.state.didCount}</h3>
            <ul className="ul">
                {
                    this.state.list.map(this.initListLi.bind(this)) //子组件中会须要调用函数
                }
            </ul>
            <Add addLiItem={this.addLiItem.bind(this)}/>
        </article>
    )
}复制代码

写在后面

github地址：Close2React

我是嘉宝Appian，一个卖萌出家的算法妹纸。

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程