react如何快速入门？vue开发者看过来

前言：

本文皆在以最短的时间带vue开发者对react有个大致的了解。

react jsx

JSX是JavaScript XML,是React提供的Syntax Sugar, 能让我们可以在JS中写html标记语言

• 可自动防范注入攻击（渲染前所有的内容默认会进行转义）
• 事件使用驼峰式写法
• style内的css属性使用驼峰式写法
• 自定义组件首字母大写

const element = <h1 tabIndex="0">Hello, world!</h1>; 
//const element = <img src={user.avatarUrl}></img>; 
//var add =  funtion(){}
//const element = <h1 onClick={add}>Hello, world!</h1>; 
//var style = {
// fontSize:13  
//}
//const element = <h1 style={style}>Hello, world!</h1>; 

ReactDOM.render(
  element,
  document.getElementById('root')
);

react安装

create-react-app是facebook react团队打造的脚手架，通过脚手架可以快速构建react项目

$ cnpm install -g create-react-app

$ create-react-app my-app

$ cd my-app/

$ npm start

1.目录结构

react

my-app/
  README.md
  node_modules/
  package.json
  .gitignore
  public/
    favicon.ico
    index.html
    manifest.json
  src/
    App.css
    App.js
    App.test.js
    index.css
    index.js
    logo.svg

vue

my-app/
  README.md
  node_modules/
  package.json
  .gitignore
  public/
    favicon.ico
    index.html
  src/
    App.vue
    main.js
  vue.config.js

2.查看入口js

react（index.js）

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode> //内部组件开启严格模式
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

vue（main.js）

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

3.元素

const element = <h1>Hello, world</h1>;

React 元素是不可变对象。一旦被创建，你就无法更改它的子元素或者属性。一个元素就像电影的单帧：它代表了某个特定时刻的 UI。

通过 ReactDOM.render()将dom节点插入到指定的dom中

const element = (
<div>
 测试元素插入
</div>
);
ReactDOM.render(element, document.getElementById('root'));
//将指定的div渲染到id为root的dom节点下

由于不可改变，如果需要更新值，或者替换的话，就需要重新插入节点到指定dom节点下。

react

function tick() {
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  ReactDOM.render(element, document.getElementById('root'));
}

setInterval(tick, 1000);

接下来对比一下vue、react实现的获取当前时间

vue

js:

data(){
  return{
    time:0
  }
},

setInterval(tick, 1000);
function tick() {
  this.time = new Date().toLocaleTimeString();
}

dom:

<div>
    {{time}}
</div>

对比：

vue直接修改变量值，会直接更改页面上的值

react需要重新将dom渲染到指定id的dom节点下，不过React DOM 会将元素和它的子元素与它们之前的状态进行比较，并只会进行必要的更新来使 DOM 达到预期的状态。

4.组件定义及使用

react

1.创建一个文件 Test.js
import React from 'react';
class Test extends React.Component {
  render() {
    return <h1>Hello World!</h1>;
  }
}

export default Test;
2.引入刚创建的Test
import Test from './Test'

3.使用
ReactDOM.render(
  <React.StrictMode>
    {/* <App /> */}
    <Test/>
  </React.StrictMode>,
  document.getElementById('root')
);

vue

1.创建一个文件Test.vue
<template>
  <h1>Hello World!</h1>
</template>
2.引入Test.vue
import Test from './Test'
3.使用
components:{Test}
<Test/>

5.React State(状态)

在我看来react的state就类似于vue组件中的data,具体会有一些差异，感兴趣的可以详细的研究研究。

react

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }
 
  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>现在是 {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}
 
ReactDOM.render(
  <Clock />,
  document.getElementById('example')
);

vue

<template>
    <div>
        <h1>Hello, world!</h1>
        <h2>现在是 {{date.toLocaleTimeString()}}.</h2>
      </div>
</template>

<script>
export default {
    data(){
        return{
            date: new Date()
        }
    }
}
</script>

<style>

</style>

6.React Props

与vue的props相同，都是单向数据流，不允许在子组件修改父组件传入的参数

react

<Test name='xiaohuozi'/>
import React from 'react';
class Test extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }
 
  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>{this.props.name}</h2>
      </div>
    );
  }
}

export default Test;

vue

<template>
    <div>
        <h1>Hello, world!</h1>
        <h2>{{name}}</h2>
      </div>
</template>

<script>
export default {
    props:{
        name:{
            type:String,
            default:''
        }
    },
    data(){
        return{
            date: new Date()
        }
    }
}
</script>

7.react 生命周期

• 生命周期的方法对比vue

状态	vue	react
渲染前	beforeCreate	componentWillMount
渲染后	mounted	componentDidMount
接收到新的prop后被调用		componentWillReceiveProps
在组件接收到新的props或者state时被调用		shouldComponentUpdate
在组件接收到新的props或者state但还没有render时被调用	beforeUpdate	componentWillUpdate
在组件完成更新后立即调用，在初始化时不会被调用	updated	componentDidUpdate
在组件从 DOM 中移除之前立刻被调用	beforeDestroy	componentWillUnmount

react组件创建步骤

1. 接收父组件参数 接收props
2. 组件内部初始化，constructor方法，初始化state
3. componentWillMount被调用
4. 调用rander方法渲染
5. 渲染后调用componentDidMount方法

如果想获取更多内容，可以扫描下方二维码，一起学习，一起进步。