技術標籤：經驗總結

前言：

本文皆在以最短的時間帶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

react元件建立步驟

1. 接收父元件引數 接收props
2. 元件內部初始化，constructor方法，初始化state
3. componentWillMount被呼叫
4. 呼叫rander方法渲染
5. 渲染後呼叫componentDidMount方法

如果想獲取更多內容，可以掃描下方二維碼，一起學習，一起進步。