React Native開發之React基礎

為了幫助大家快速上手React Native開發，在這本節中將向大家介紹開發React Native所需要的一些React必備基礎知識。

概述

本節課將從React的特點、如何使用React、JSX語法，然后會對組件(Component）以及組件的屬性(props)、狀態(state)、生命周期等方面進行講解。

通過本節課程能學到什么？

  • 對React有個全面的認識；
  • 熟悉JSX基本語法；
  • 了解組件結構；
  • 熟悉組件的生命周期；
  • 學會使用props；
  • 學會使用state；
  • 熟悉自定義組件；

React是什么？

React 是 Facebook 推出的開源 JavaScript Library，它是一個用于組建用戶界面的JavaScript庫，讓你以更簡單的方式來創建交互式用戶界面，它的出現讓許多革新性的 Web 觀念開始流行起來，例如：Virtual DOM、Component，聲明式渲染等。

聲明式與命令式

命令式編程：命令“機器”如何去做事情(how)，這樣不管你想要的是什么(what)，它都會按照你的命令實現。
聲明式編程：告訴“機器”你想要的是什么(what)，讓機器想出如何去做(how)。

演示

  1. 當數據改變時，React將高效的更新和渲染需要更新的組件。聲明式視圖使你的代碼更可預測，更容易調試。
  2. 構建封裝管理自己的狀態的組件，然后將它們組裝成復雜的用戶界面。由于組件邏輯是用JavaScript編寫的，而不是模板，所以你可以輕松地通過您的應用程序傳遞豐富的數據，并保持DOM狀態。
  3. 一次學習隨處可寫，學習React，你不僅可以將它用于Web開發，也可以用于React Native來開發Android和iOS應用。

如何使用？

構建一個新的 React 單頁應用，可以通過Create React App來完成。它可以幫助你配置開發環境，以便你可以使用最新的 JavaScript 特性，還能提供一個友好的開發體驗，并為生產環境優化你的應用。

npm install -g create-react-app
create-react-app my-app
cd my-app
npm start

"dependencies": {
    "react": "^16.6.3",//是 React 的核心庫
    "react-dom": "^16.6.3",//提供與 DOM 相關的功能
    "react-scripts": "2.1.1"http://create-react-app 的一個核心包，一些腳本和工具的默認配置都集成在里面
  },

ReactDOM.render

ReactDOM.render(element, container[, callback])

渲染一個 React 元素到由 container 提供的 DOM 中，并且返回組件的一個 引用(reference) （或者對于 無狀態組件 返回 null ）。

JSX

JSX 是一個看起來很像 XML 的 JavaScript 語法擴展。
每一個XML標簽都會被JSX轉換工具轉換成純JavaScript代碼，使用JSX，組件的結構和組件之間的關系看上去更加清晰。
JSX并不是React必須使用的，但React官方建議我們使用 JSX , 因為它能定義簡潔且我們熟知的包含屬性的樹狀結構語法。

Usage:

React.render(//使用JSX
    <div>
        <div>
            <div>content</div>
        </div>
    </div>,
    document.getElementById('example')
);
React.render(//不使用JSX
    React.createElement('div', null,
        React.createElement('div', null,
            React.createElement('div', null, 'content')
        )
    ),
    document.getElementById('example')
);

createElement

React.createElement(
  type,
  [props],
  [...children]
)

根據給定的類型創建并返回新的 React element 。參數type既可以是一個html標簽名稱字符串(例如'div' 或 'span' )，也可以是一個 React component 類型(一個類或一個函數)。


React.createElement(Hello, {toWhat: 'World'}, 'hello'),
//等價于 <Hello toWhat="World">hello</Hello>,

HTML標簽 與 React組件 對比

React 可以渲染 HTML 標簽 (strings) 或 React 組件 (classes)。
要渲染 HTML 標簽，只需在 JSX 里使用小寫字母開頭的標簽名。

var myDivElement = <div className="foo" />;
React.render(myDivElement, document.root);

要渲染 React 組件，只需創建一個大寫字母開頭的本地變量。

var MyComponent = ...;
var myElement = <MyComponent someProperty={true} />;
React.render(myElement, document.body);

提示：

  • React 的 JSX 里約定分別使用首字母大、小寫來區分本地組件的類和 HTML 標簽。
  • 由于 JSX 就是 JavaScript，一些標識符像 class 和 for 不建議作為 XML 屬性名。作為替代， React DOM 使用 className 和 htmlFor 來做對應的屬性。

JavaScript 表達式

屬性表達式

要使用 JavaScript 表達式作為屬性值，只需把這個表達式用一對大括號 {} 包起來，不要用引號 ""。

// 輸入 (JSX):
var person = <Person name={window.isLoggedIn ? window.name : ''} />;
// 輸出 (JS):
var person = React.createElement(
  Person,
  {name: window.isLoggedIn ? window.name : ''}
);

子節點表達式

同樣地，JavaScript 表達式可用于描述子結點：

// 輸入 (JSX):
var content = <Container>{window.isLoggedIn ? <Nav /> : <Login />}</Container>;
// 輸出 (JS):
var content = React.createElement(
  Container,
  null,
  window.isLoggedIn ? React.createElement(Nav) : React.createElement(Login)
);

注釋

JSX 里添加注釋很容易，它們只是 JS 表達式而已。你只需要在一個標簽的子節點內(非最外層)用 {} 包圍要注釋的部分。

class ReactDemo extends Component {
  render() {
    return (
      <View style={styles.container}>
        {/*標簽子節點的注釋*/}
        <Text style={styles.welcome}
          //textAlign='right'
          textShadowColor='yellow'
          /*color='red'
          textShadowRadius='1'*/
          >
          React Native!
        </Text>
      </View>
    );
  }
}

心得：在標簽節點以外注釋，和通常的注釋是一樣的，多行用“/**/” 單行用“//”；

JSX延展屬性

不要試圖去修改組件的屬性

不推薦做法：

  var component = <Component />;
  component.props.foo = x; // 不推薦
  component.props.bar = y; // 不推薦

這樣修改組件的屬性，會導致React不會對組件的屬性類型（propTypes）進行的檢查。從而引發一些預料之外的問題。

推薦做法：

var component = <Component foo={x} bar={y} />;

延展屬性（Spread Attributes）

你可以使用 JSX 的新特性 - 延展屬性：

  var props = {};
  props.foo = x;
  props.bar = y;
  var component = <Component {...props} />;

傳入對象的屬性會被復制到組件內。

它能被多次使用，也可以和其它屬性一起用。注意順序很重要，后面的會覆蓋掉前面的。

  var props = { foo: 'default' };
  var component = <Component {...props} foo={'override'} />;
  console.log(component.props.foo); // 'override'

上文出現的...標記被叫做延展操作符（spread operator）已經被 ES6 數組 支持。

http://www.devio.org/2018/09/09/ES6-ES7-ES8-Feature/#14

Component

React 允許將代碼封裝成組件（component），然后像插入普通 HTML 標簽一樣，在網頁中插入這個組件。

class Hello extends React.Component{
    render() {
        return <h1>Hello {this.props.name}</h1>;
    }
}
ReactDOM.render(
  <Hello name="John" />,
  document.getElementById('example')
);

上面代碼中，變量 HelloMessage 就是一個組件類。模板插入 <HelloMessage />時，會自動生成 HelloMessage 的一個實例。所有組件類都必須有自己的 render 方法，用于輸出組件。

注意

  • 組件類的第一個字母必須大寫
  • 組件類只能包含一個頂層標簽? 演示

組件的屬性(props)

我們可以通過this.props.xx的形式獲取組件對象的屬性，對象的屬性可以任意定義，但要避免與JavaScript關鍵字沖突。

遍歷對象的屬性：

this.props.children會返回組件對象的所有屬性。
React 提供一個工具方法 React.Children 來處理 this.props.children 。我們可以用 React.Children.map或React.Children.forEach 來遍歷子節點。

React.Children.map

React.Children.map(children, function[(thisArg)])

在包含在 children 里的每個子級上調用函數，調用的函數的 this 設置為 thisArg 。如果 children 是一個嵌套的對象或數組，它將被遍歷。如果 children 是 null 或 undefined ，返回 null 或 undefined 而不是一個空數組。

React.Children.forEach

React.Children.forEach(children, function[(thisArg)])

Usage：

class NotesList extends React.Component{
    render(){
        return (
            <ol>
                {
                    React.Children.map(this.props.children,(child)=> {
                        return <h1>{child}</h1>;
                    })
                }
            </ol>
        );
    }
}
ReactDOM.render(<NotesList>
    <span>hello</span>
    <span>world</span>
</NotesList>, document.getElementById('root'));

演示

[PropTypes]

組件的屬性可以接受任意值，字符串、對象、函數等等都可以。有時，我們需要一種機制，驗證別人使用組件時，提供的參數是否符合要求。
組件類的PropTypes屬性，就是用來驗證組件實例的屬性是否符合要求。

React.PropTypes 從 React v15.5開始被移入了prop-types，使用時需要留意；

import  PropTypes from 'prop-types'
class MyTitle extends React.Component{
    static propTypes={
        title: PropTypes.string.isRequired,
    };
    render() {
        return <h1> title:{this.props.title} </h1>;
    }
}
ReactDOM.render(<MyTitle />, document.getElementById('root'));

上面的Mytitle組件有一個title屬性。PropTypes 告訴 React，這個 title 屬性是必須的，而且它的值必須是字符串。現在，我們設置 title 屬性的值是一個數值。

var data = 123;
ReactDOM.render(
  <MyTitle title={data} />,
  document.body
);

這樣一來，title屬性就通不過驗證了。控制臺會顯示一行錯誤信息。

Warning: Failed propType: Invalid prop `title` of type `number` supplied to `MyTitle`, expected `string`.

更多的PropTypes設置，可以查看官方文檔。

默認屬性

此外，可以通過defaultProps用來設置組件屬性的默認值。

class MyTitle extends React.Component{
    static defaultProps={
        shortName:'MyTitle'
    };
    render() {
        return <h1> {this.props.shortName}</h1>;
    }
}
ReactDOM.render(<MyTitle/>, document.getElementById('root'));

上面代碼會輸出"MyTitle"。

ref 屬性(獲取真實的DOM節點)

組件并不是真實的 DOM 節點，而是存在于內存之中的一種數據結構，叫做虛擬 DOM （virtual DOM）。只有當它插入文檔以后，才會變成真實的 DOM 。根據 React 的設計，所有的 DOM 變動，都先在虛擬 DOM 上發生，然后再將實際發生變動的部分，反映在真實 DOM上，這種算法叫做 DOM diff ，它可以極大提高網頁的性能表現。

但是，有時需要從組件獲取真實 DOM 的節點，這時就要用到 ref 屬性。

class Alert extends React.Component {
    showAlert(message) {
        alert(`Debug:${message}`);
    }

    render() {
        return null;
    }
}

class MyTitle extends React.Component {
    onClick = () => {
        this.refs.alert.showAlert('MyTitle');
    };

    render() {
        return <div>
            <h1 onClick={this.onClick}>Click me</h1>
            <Alert ref='alert'/>
        </div>;
    }
}

ReactDOM.render(<MyTitle/>, document.getElementById('root'));

上面代碼中，組件 MyTitle 的子節點有一個Alert組件，為了調用這個組件提供的方法，這時就必須獲取真實的 DOM 節點，虛擬 DOM 是拿不到用戶輸入的。為了做到這一點，我們在使用這個組件的時候必須為其設置一個ref屬性，然后 this.refs.[refName] 就會返回這個真實的 DOM 節點。

需要注意的是，由于 this.refs.[refName] 屬性獲取的是真實 DOM ，所以必須等到虛擬 DOM 插入文檔以后，才能使用這個屬性，否則會報錯。上面代碼中，通過為組件指定 Click 事件的回調函數，確保了只有等到真實 DOM 發生 Click 事件之后，才會讀取 this.refs.[refName] 屬性。

React 組件支持很多事件，除了 Click 事件以外，還有 KeyDown 、Copy、Scroll 等，完整的事件清單請查看官方文檔。

心得：ref屬性在開發中使用頻率很高，使用它你可以獲取到任何你想要獲取的組件的對象，有了這個對象你就可以靈活地做很多事情，比如：讀寫對象的變量，甚至調用對象的函數。

state

上文講到了props，組件會根據props的變化來進行渲染，但組件無法改變自身的props，那么組件為了實現交互，可以使用組件的 state 。state 是組件私有的，可以通過state={}方式初始化，通過調用 this.setState() 來改變它。當 state 更新之后，組件就會重新渲染自己。

render() 方法依賴于 this.props 和 this.state ，框架會確保渲染出來的 UI 界面總是與輸入（ this.props 和 this.state ）保持一致。

初始化state

可以通過一下兩種方式來初始化state，在組件的生命周期中僅執行一次，用于設置組件的初始化 state 。

constructor(props){
    super(props);
    this.state={
        name:''
    }
}
//or
state={
    name:''
}

更新 state

通過this.setState()方法來更新state，調用該方法后，React會重新渲染相關的UI。
this.setState({favorite:!this.state.favorite});

Usage:

class FavoriteButton extends React.Component{
   state={
       favorite:false
   };
    handleClick=()=>{
        this.setState({favorite:!this.state.favorite});
    };
    render(){
        const text=this.state.favorite? 'favorite':'un favorite';
        return (
            <h1 onClick={this.handleClick}>
                You {text} this. Click to toggle.
            </h1>
        );
    }
}

上面代碼是一個 FavoriteButton 組件，它的通過 state={}初始狀態，也就是一個對象，這個對象可以通過 this.state 屬性讀取。當用戶點擊組件，導致狀態變化，this.setState 方法就修改狀態值，每次修改以后，自動調用 this.render 方法，再次渲染組件。

心得：由于 this.props 和 this.state 都用于描述組件的特性，可能會產生混淆。一個簡單的區分方法是，this.props 表示那些本組件無法改變的特性，而 this.state 是會隨著用戶互動而產生變化的特性。

組件的生命周期

在iOS中UIViewController提供了(void)viewWillAppear:(BOOL)animated, - (void)viewDidLoad,(void)viewWillDisappear:(BOOL)animated等生命周期方法，在Android中Activity則提供了onCreate(),onStart(),onResume(),onPause(),onStop(),onDestroy()等生命周期方法，這些生命周期方法描述了一個界面從創建到銷毀的一生。

那么在React 中組件(Component)也是有自己的生命周期方法的。

演示

[組件的生命周期分成三個時期：

  • Mounting：創建時
  • Updating：更新時
  • Unmounting：卸載時

不安全的方法

  • componentWillMount
  • componentWillReceiveProps
  • componentWillUpdate

使用這些生命周期方法通常會導致錯誤和不一致，因此將來會被棄用。在新的React版本中他們被標記為UNSAFE。

static-lifecycle-methods

Mounting(裝載)

constructor()

constructor(props)

React組件的構造函數將會在裝配之前被調用。當為一個React.Component子類定義構造函數時，你應該在任何其他的表達式之前調用super(props)。否則，this.props在構造函數中將是未定義，并可能引發異常。

構造函數是初始化狀態的合適位置。若你不初始化狀態且不綁定方法，那你也不需要為你的React組件定義一個構造函數。

static getDerivedStateFromProps()

static getDerivedStateFromProps(nextProps, prevState)

組件實例化后和接受新屬性時將會調用getDerivedStateFromProps。它應該返回一個對象來更新狀態，或者返回null來表明新屬性不需要更新任何狀態。

注意，如果父組件導致了組件的重新渲染，即使屬性沒有更新，這一方法也會被調用。如果你只想處理變化，那么可以通過比較新舊值來完成。

調用this.setState() 通常不會觸發 getDerivedStateFromProps()。

render

ReactComponent render()

render() 方法是必須的。

當被調用時，其會檢查this.props 和 this.state并返回以下類型中的一個:

  • React元素。 通常是由 JSX 創建。該元素可能是一個原生DOM組件的表示，如<div />，或者是一個你定義的復合組件。
  • 字符串和數字。 這些將被渲染為 DOM 中的 text node。
  • Portals。 由 ReactDOM.createPortal 創建。
  • null。 什么都不渲染。
  • 布爾值。 什么都不渲染。（通常存在于 return test && <Child />寫法，其中 test 是布爾值。）

返回null 或 false時，ReactDOM.findDOMNode(this) 將返回 null。

render()函數應該是純粹的，也就是說該函數不修改組件的 state，每次調用都返回相同的結果，不讀寫 DOM 信息，也不和瀏覽器交互（例如通過使用 setTimeout）。如果需要和瀏覽器交互，在 componentDidMount() 中或者其它生命周期方法中做這件事。保持 render() 純粹，可以使服務器端渲染更加切實可行，也使組件更容易被理解。

提示：若 shouldComponentUpdate()返回false，render()函數將不會被調用。

componentDidMount()

componentDidMount()

componentDidMount()在組件被裝配后立即調用，通常在該方法中進行一些初始化操作。·初始化時需要DOM節點的操作可以放到這里進行`。若你需要從遠端加載數據，這是一個適合實現網絡請求的地方。在該方法里設置狀態將會觸發重渲。

這一方法是一個發起任何訂閱的好地方。如果你這么做了，別忘了在componentWillUnmount()退訂。

另外，在這個方法中調用setState()將會觸發一次額外的渲染，但是它將在瀏覽器刷新屏幕之前發生。這保證了即使render()將會調用兩次，但用戶不會看到中間狀態。

Updating (更新)

shouldComponentUpdate

shouldComponentUpdate(nextProps, nextState)

在接收到新的 props 或者 state，將要渲染之前調用，以讓React知道當前狀態或屬性的改變是否不影響組件的輸出。

該方法在初始化渲染的時候不會調用，在使用 forceUpdate 方法的時候也不會。如果確定新的 props 和 state 不需要重新渲染，則此處應該 返回 false。

心得：重寫次方你可以根據實際情況，來靈活的控制組件當 props 和 state 發生變化時是否要重新渲染組件。

getSnapshotBeforeUpdate

getSnapshotBeforeUpdate(prevProps, prevState)

getSnapshotBeforeUpdate()在最新的渲染輸出提交給DOM前將會立即調用。它讓你的組件能在當前的值可能要改變前獲得它們。這一生命周期返回的任何值將會 作為參數被傳遞給componentDidUpdate()。

componentDidUpdate

componentDidUpdate(prevProps, prevState, snapshot)

在組件的更新已經同步到 DOM 中之后立刻被調用。

該方法不會在初始化渲染的時候調用。使用該方法可以在組件更新之后操作 DOM 元素。

Unmounting(移除)

componentWillUnmount

componentWillUnmount()

在組件從 DOM 中移除的時候立刻被調用。

在該方法中執行任何必要的清理，比如無效的定時器，或者清除在 componentDidMount 中創建的 DOM 元素。

參考

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 作為一個合格的開發者，不要只滿足于編寫了可以運行的代碼。而要了解代碼背后的工作原理；不要只滿足于自己的程序...
    六個周閱讀 8,508評論 1贊 33
  • 40、React 什么是React？React 是一個用于構建用戶界面的框架（采用的是MVC模式）：集中處理VIE...
    萌妹撒閱讀 1,050評論 0贊 1
  • 原教程內容詳見精益 React 學習指南，這只是我在學習過程中的一些閱讀筆記，個人覺得該教程講解深入淺出，比目前大...
    leonaxiong閱讀 2,860評論 1贊 18
  • HTML模版 之后出現的React代碼嵌套入模版中。 1. Hello world 這段代碼將一個一級標題插入到指...
    ryanho84閱讀 6,302評論 0贊 9
  • 1、什么是react React.js 是一個幫助你構建頁面 UI 的庫。React.js 將幫助我們將界面分成了...
    谷子多閱讀 2,570評論 1贊 13