React系列之 React入門

pf_miles 發(fā)布于2019-08-20 11:06 / 362人閱讀

摘要：原文地址是一個庫，主要是通過操作數(shù)據(jù)的方式去操縱，為什么要重造輪子呢，因為覺的目前市面上的框架對于創(chuàng)建大型應(yīng)用程序不夠直觀，不能滿足需求，所以誕生了。其實說它性能高，只不過是用的方式計算出最小的操作，所以性能就上來了。

原文地址：https://gmiam.com/post/react-...

React 是一個 JS 庫，主要是通過操作數(shù)據(jù)的方式去操縱 DOM，為什么要重造輪子呢，因為 FB 覺的目前市面上的 MV* 框架對于創(chuàng)建大型應(yīng)用程序不夠直觀，不能滿足需求，所以誕生了 React。

React 現(xiàn)在官方的介紹是 Declarative、Component-Based、Learn Once, Write Anywhere，其實開始推出時主要的特色是 Virtual DOM，因為 DOM 操作總是很慢的，而 JS 的性能日趨向上，所以 React 內(nèi)部用 JS 維護一顆 DOM 樹，每次數(shù)據(jù)變了從新生成一顆樹與之前的做對比，把實際變化的地方應(yīng)用到真實的 DOM 上。其實說它性能高，只不過是用 JS 的方式計算出最小的 DOM 操作，所以性能就上來了。

說到這里我們實際操作下吧，這里假設(shè)你熟悉 node、babel、webpack 方式，當(dāng)然你也可以選擇你喜好的方式傳送門

首先創(chuàng)建目錄結(jié)構(gòu)

react-demo

    .babelrc

    index.html

    src
        app.js

index.html



  
    
    
    React App

app.js

var React = require( "react" )
var ReactDOM = require( "react-dom" )

var HelloMessage = React.createClass( {
    render: function () {
        return Hello {this.props.name}
    }
})

ReactDOM.render( , document.getElementById( "app" ) )

.babelrc

{ "presets": ["es2015","react"] }

安裝依賴 npm install --save react react-dom babel-preset-react babel-loader babel-core

編譯監(jiān)聽 webpack src/app.js bundle.js -w --module-bind "js=babel"

打開 index.html 查看效果

先說下 jsx 語法，React 讓你不需要再寫 html 拼接字符等操作，而是直接寫 html，js 處理放到 { } 里書寫，官方提供 jsx 語法非必要，也可以脫離寫純 js 的，如上面的經(jīng)過編譯后

"use strict";

var HelloMessage = React.createClass({
  displayName: "HelloMessage",

  render: function render() {
    return React.createElement(
      "div",
      null,
      "Hello ",
      this.props.name
    );
  }
});

ReactDOM.render(React.createElement(HelloMessage, { name: "John" }), document.getElementById( "app" ));

但是可以看出這么麻煩沒人去手寫的

再來說下組件，React 的概念就是給應(yīng)用分層，創(chuàng)建一個個組件，最后拼出一個頁面，組件方便后期的維護、擴展、以及再重用，隨著組件的越多后面寫的代碼越少，來個例子

var Avatar = React.createClass({
  render: function() {
    return (
      
        
        
      
    );
  }
});

var PagePic = React.createClass({
  render: function() {
    return (
      
    );
  }
});

var PageLink = React.createClass({
  render: function() {
    return (
      
        {this.props.pagename}
      
    );
  }
});

ReactDOM.render(
  ,
  document.getElementById("app")
);

可以看到組件要提供自己的 render 方法，組件可以相互嵌套，數(shù)據(jù)通過 this.props 單向傳遞

同時需要注意

屬性 class 要寫成 className，for 寫成 htmlFor，因為它們是 js 的保留字

對于render 返回的內(nèi)容只能有一個頂級標簽，如果標簽超過多行要用 ( ) 包含

關(guān)于 props 不要去改變它，會導(dǎo)致一些不可預(yù)知的問題，另外官方推薦用 es6 的 ... 操作符去掛載屬性

var props = { foo: "default", bar:"bar" };
var component = ;
console.log(component.props.bar); // "bar"
console.log(component.props.foo); // "override"

這里有個特殊屬性 this.props.children，來個例子

var NotesList = React.createClass({
  propTypes: {
        children: React.PropTypes.array.isRequired,
  },
  render: function() {
    return (
      
      {
        React.Children.map(this.props.children, function (child) {
          return {child};
        })
      }
      
    );
  }
});

ReactDOM.render(
  
    hello
    world
  , document.getElementById("app")
);

同時可以看到這里提供了 propTypes 可以給屬性做檢查，驗證說明 children 必須提供且是一個數(shù)組(多個)，更多的類型驗證可以看這里

前面創(chuàng)建組件都是通過 React.createClass ，可以通過 es6 class 語法

class HelloMessage extends React.Component {
  render() {
    return Hello {this.props.name};
  }
}
ReactDOM.render(, document.getElementById("app"));

還有 Stateless Functions 方式

function HelloMessage(props) {
  return Hello {props.name};
}
ReactDOM.render(, document.getElementById("app"));

官方推薦盡量寫 stateless functions ，因為未來會優(yōu)化這些來避免無用的檢查和內(nèi)存分配

下面看下如何寫事件

var Input = React.createClass({
  getInitialState: function() {
    return {value: "Hello!"};
  },
  handleChange: function(event) {
    this.setState({value: event.target.value});
  },
  render: function () {
    var value = this.state.value;
    return (
      
        
        {value}
      
    );
  }
});

ReactDOM.render(, document.getElementById("app"));

駱駝式的 on 語法即可監(jiān)聽事件，事件是標準的跨瀏覽器的事件，雖然內(nèi)聯(lián)寫法，但是是委托實現(xiàn)的~

說到了事件交互可能就要設(shè)及獲取真實的 dom 節(jié)點，React 通過 ref 設(shè)置，來個例子

var React = require( "react" )
var ReactDOM = require( "react-dom" )

var MyComponent = React.createClass({
  handleClick: function() {
    this.refs["myinput"].focus()
  },
  render: function() {
    return (
      
        
        
      
    );
  }
});

ReactDOM.render(
  ,
  document.getElementById("app")
);

ref 字符屬性的方式未來會被廢棄，官方推薦使用 ref callback 方式

var MyComponent = React.createClass({
  handleClick: function() {
    if (this.myTextInput !== null) {
      this.myTextInput.focus();
    }
  },
  render: function() {
    return (
      
         this.myTextInput = ref} />
        
      
    );
  }
});

ReactDOM.render(
  ,
  document.getElementById("app")
);

說到這里看下組件的生命周期與如何更新，還是來個例子

var Timer = React.createClass({
  getInitialState: function() {
    return {secondsElapsed: 0};
  },
  tick: function() {
    this.setState({secondsElapsed: this.state.secondsElapsed + 1});
  },
  componentDidMount: function() {
    this.interval = setInterval(this.tick, 1000);
  },
  componentWillUnmount: function() {
    clearInterval(this.interval);
  },
  render: function() {
    return (
      Seconds Elapsed: {this.state.secondsElapsed}
    );
  }
});

ReactDOM.render(,  document.getElementById("app"));

生命周期有三個主要部分

Mounting 插入 dom

getInitialState()

componentWillMount()

componentDidMount ()

Updating 重新渲染

componentWillReceiveProps(object nextProps)

shouldComponentUpdate(object nextProps, object nextState)

componentWillUpdate(object nextProps, object nextState)

componentDidUpdate(object prevProps, object prevState)

Unmounting 移除 dom

componentWillUnmount()

周期提供了 will 方法在事情發(fā)生之前調(diào)用， did 方法在事情法神之后調(diào)用，具體查看這里

對于更新，上面的例子在組件 componentDidMount (插入 dom 后) hook 中定時更新組件的 state，state變更會導(dǎo)致 render 重新渲染頁面

對于這里說下性能問題，雖然虛擬dom計算過程很快，但是很多時候我們可以避免它的計算以更好的優(yōu)化處理

例如一個組件的更新可能會導(dǎo)致它的子組件一起跟著更新，子組件很可能沒有變化，但同樣會進行一次diff運算，白白浪費了時間，所以 React 提供了 shouldComponentUpdate 鉤子函數(shù)，默認是直接返回 true，也及是每次都運算比較，所以我們可以在這里優(yōu)化，來個例子

React.createClass({
  propTypes: {
    value: React.PropTypes.string.isRequired
  },
  shouldComponentUpdate: function(nextProps, nextState) {
      return this.props.value !== nextProps.value;
  },
  render: function() {
    return {this.props.value};
  }
});

這里只有 value 變化的時候在重新渲染計算，否則直接跳過

對于上面的淺對比，React 提供了通用解決方案 PureRenderMixin 擴展，應(yīng)用 React 的 mixins 功能即可自動實現(xiàn)處理比對

var PureRenderMixin = require("react-addons-pure-render-mixin");
React.createClass({
  mixins: [PureRenderMixin],

  render: function() {
     return {this.props.value};
  }
});

但是如果有深層結(jié)構(gòu)，上面的處理可能不會按預(yù)期工作，例如

//  this.props.value 的值為 { foo: "bar" }
// nextProps.value 的值為 { foo: "bar" },
// 但是對象的引用不同，導(dǎo)致不會相等
this.props.value !== nextProps.value; // true

而且如果我們不小心管理引用的話也會引發(fā)另一些問題，例如這個組件有一個父組件

React.createClass({
  getInitialState: function() {
    return { value: { foo: "bar" } };
  },

  onClick: function() {
    var value = this.state.value;
    value.foo += "bar"; // ANTI-PATTERN!
    this.setState({ value: value });
  },

  render: function() {
    return (
      
        
        Click me
      
    );
  }
});

首先內(nèi)部組件得到 { foo: "bar" }，點擊后出發(fā) value 更新 { foo: "barbar" },觸發(fā) re-rendering 程序，內(nèi)部組件將會得到 { foo: "barbar" }，但是 this.props.value 與 nextProps.value 指向同一個引用，導(dǎo)致任何時候比對都是 true，而導(dǎo)致頁面不更新

而且如果父組件應(yīng)用 PureRenderMixin 的話，由于改動相同引用所以也會導(dǎo)致父組件的 re-rendering 不觸發(fā)

那最后該如何處理呢？請看下一篇 Immutable-js 來解救你~

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/80396.html

發(fā)表評論

登陸后可評論

0條評論

pf_miles

男|高級講師

我要關(guān)注我要私信

TA的文章

Transition 實現(xiàn)輪播圖

閱讀 2449·2019-08-30 15:52
pt，px，rem和em之間區(qū)別總結(jié)

閱讀 2246·2019-08-30 12:51
一批面試記錄

閱讀 2842·2019-08-29 18:41
移動端下彈框禁止背景滑動

閱讀 2826·2019-08-29 17:04
es6讓操作unicode字符集更加簡單

閱讀 820·2019-08-29 15:11
CSS Grid布局：合并單元格布局

閱讀 1733·2019-08-28 18:02
如何結(jié)合npm做一個前端腳手架

閱讀 3610·2019-08-26 10:22
Object 對象的相關(guān)方法

閱讀 2517·2019-08-26 10:12

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

React系列之 React入門

相關(guān)文章

React入門之腳手架搭建項目

前端文檔收集

前端文檔收集

前端資源系列（4）-前端學(xué)習(xí)資源分享&前端面試資源匯總

發(fā)表評論

0條評論

pf_miles

男|高級講師

TA的文章

Transition 實現(xiàn)輪播圖

pt，px，rem和em之間區(qū)別總結(jié)

一批面試記錄

移動端下彈框禁止背景滑動

es6讓操作unicode字符集更加簡單

CSS Grid布局：合并單元格布局

如何結(jié)合npm做一個前端腳手架

Object 對象的相關(guān)方法

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

React系列之 React入門

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！