React Native開發(fā)之React基礎(chǔ)（全）

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

概述

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

通過本節(jié)課程能學(xué)到什么？

  • 對React有個全面的認(rèn)識；
  • 熟悉JSX基本語法；
  • 了解組件結(jié)構(gòu)；
  • 熟悉組件的生命周期；
  • 學(xué)會使用props；
  • 學(xué)會使用state；
  • 熟悉自定義組件；

React是什么？

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

聲明式與命令式

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

演示

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

如何使用？

構(gòu)建一個新的 React 單頁應(yīng)用，可以通過Create React App來完成。它可以幫助你配置開發(fā)環(huán)境，以便你可以使用最新的 JavaScript 特性，還能提供一個友好的開發(fā)體驗，并為生產(chǎn)環(huán)境優(yōu)化你的應(yīng)用。

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 相關(guān)的功能
    "react-scripts": "2.1.1"http://create-react-app 的一個核心包，一些腳本和工具的默認(rèn)配置都集成在里面
  },

ReactDOM.render

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

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

JSX

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

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]
)

根據(jù)給定的類型創(chuàng)建并返回新的 React element 。參數(shù)type既可以是一個html標(biāo)簽名稱字符串(例如’div’ 或 ‘span’ )，也可以是一個 React component 類型(一個類或一個函數(shù))。


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

HTML標(biāo)簽 與 React組件 對比

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

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

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

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

提示：

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

JavaScript 表達(dá)式

屬性表達(dá)式

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

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

子節(jié)點表達(dá)式

同樣地，JavaScript 表達(dá)式可用于描述子結(jié)點：

// 輸入 (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 表達(dá)式而已。你只需要在一個標(biāo)簽的子節(jié)點內(nèi)(非最外層)用 {} 包圍要注釋的部分。

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

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

JSX延展屬性

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

不推薦做法：

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

這樣修改組件的屬性，會導(dǎo)致React不會對組件的屬性類型（propTypes）進(jìn)行的檢查。從而引發(fā)一些預(yù)料之外的問題。

推薦做法：

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

延展屬性（Spread Attributes）

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

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

傳入對象的屬性會被復(fù)制到組件內(nèi)。

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

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

上文出現(xiàn)的...標(biāo)記被叫做延展操作符（spread operator）已經(jīng)被 ES6 數(shù)組 支持。

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

Component

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

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 方法，用于輸出組件。

注意

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

組件的屬性(props)

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

遍歷對象的屬性：

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

React.Children.map

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

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

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]

組件的屬性可以接受任意值，字符串、對象、函數(shù)等等都可以。有時，我們需要一種機制，驗證別人使用組件時，提供的參數(shù)是否符合要求。 組件類的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 屬性是必須的，而且它的值必須是字符串?，F(xiàn)在，我們設(shè)置 title 屬性的值是一個數(shù)值。

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

這樣一來，title屬性就通不過驗證了?？刂婆_會顯示一行錯誤信息。

Warning: Failed propType: Invalid proptitleof typenumbersupplied toMyTitle, expectedstring.

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

默認(rèn)屬性

此外，可以通過defaultProps用來設(shè)置組件屬性的默認(rèn)值。

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節(jié)點)

組件并不是真實的 DOM 節(jié)點，而是存在于內(nèi)存之中的一種數(shù)據(jù)結(jié)構(gòu)，叫做虛擬 DOM （virtual DOM）。只有當(dāng)它插入文檔以后，才會變成真實的 DOM 。根據(jù) React 的設(shè)計，所有的 DOM 變動，都先在虛擬 DOM 上發(fā)生，然后再將實際發(fā)生變動的部分，反映在真實 DOM上，這種算法叫做 DOM diff ，它可以極大提高網(wǎng)頁的性能表現(xiàn)。

但是，有時需要從組件獲取真實 DOM 的節(jié)點，這時就要用到 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 的子節(jié)點有一個Alert組件，為了調(diào)用這個組件提供的方法，這時就必須獲取真實的 DOM 節(jié)點，虛擬 DOM 是拿不到用戶輸入的。為了做到這一點，我們在使用這個組件的時候必須為其設(shè)置一個ref屬性，然后 this.refs.[refName] 就會返回這個真實的 DOM 節(jié)點。

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

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

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

state

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

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

初始化state

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

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

更新 state

通過this.setState()方法來更新state，調(diào)用該方法后，React會重新渲染相關(guān)的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={}初始狀態(tài)，也就是一個對象，這個對象可以通過 this.state 屬性讀取。當(dāng)用戶點擊組件，導(dǎo)致狀態(tài)變化，this.setState 方法就修改狀態(tài)值，每次修改以后，自動調(diào)用 this.render 方法，再次渲染組件。

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

組件的生命周期

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

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

演示

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

  • Mounting：創(chuàng)建時
  • Updating：更新時
  • Unmounting：卸載時

不安全的方法

  • componentWillMount
  • componentWillReceiveProps
  • componentWillUpdate

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

static-lifecycle-methods

Mounting(裝載)

constructor() 

constructor(props)

React組件的構(gòu)造函數(shù)將會在裝配之前被調(diào)用。當(dāng)為一個React.Component子類定義構(gòu)造函數(shù)時，你應(yīng)該在任何其他的表達(dá)式之前調(diào)用super(props)。否則，this.props在構(gòu)造函數(shù)中將是未定義，并可能引發(fā)異常。

構(gòu)造函數(shù)是初始化狀態(tài)的合適位置。若你不初始化狀態(tài)且不綁定方法，那你也不需要為你的React組件定義一個構(gòu)造函數(shù)。

static getDerivedStateFromProps() 

static getDerivedStateFromProps(nextProps, prevState)

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

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

調(diào)用this.setState() 通常不會觸發(fā) getDerivedStateFromProps()。

render 

ReactComponent render()

render() 方法是必須的。

當(dāng)被調(diào)用時，其會檢查this.props 和 this.state并返回以下類型中的一個:

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

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

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

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

componentDidMount() 

componentDidMount()

componentDidMount()在組件被裝配后立即調(diào)用，通常在該方法中進(jìn)行一些初始化操作。·初始化時需要DOM節(jié)點的操作可以放到這里進(jìn)行`。若你需要從遠(yuǎn)端加載數(shù)據(jù)，這是一個適合實現(xiàn)網(wǎng)絡(luò)請求的地方。在該方法里設(shè)置狀態(tài)將會觸發(fā)重渲。

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

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

Updating (更新)

shouldComponentUpdate 

shouldComponentUpdate(nextProps, nextState)

在接收到新的 props 或者 state，將要渲染之前調(diào)用，以讓React知道當(dāng)前狀態(tài)或?qū)傩缘母淖兪欠癫挥绊懡M件的輸出。

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

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

getSnapshotBeforeUpdate 

getSnapshotBeforeUpdate(prevProps, prevState)

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

componentDidUpdate 

componentDidUpdate(prevProps, prevState, snapshot)

在組件的更新已經(jīng)同步到 DOM 中之后立刻被調(diào)用。

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

Unmounting(移除)

componentWillUnmount 

componentWillUnmount()

在組件從 DOM 中移除的時候立刻被調(diào)用。

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

參考

贊賞支持

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 為了幫助大家快速上手React Native開發(fā)，在這本節(jié)中將向大家介紹開發(fā)React Native所需要的一些R...
    CrazyCodeBoy閱讀 1,959評論 1贊 9
  • 作為一個合格的開發(fā)者，不要只滿足于編寫了可以運行的代碼。而要了解代碼背后的工作原理；不要只滿足于自己的程序...
    六個周閱讀 8,679評論 1贊 33
  • 40、React 什么是React？React 是一個用于構(gòu)建用戶界面的框架（采用的是MVC模式）：集中處理VIE...
    萌妹撒閱讀 1,191評論 0贊 1
  • 原教程內(nèi)容詳見精益 React 學(xué)習(xí)指南，這只是我在學(xué)習(xí)過程中的一些閱讀筆記，個人覺得該教程講解深入淺出，比目前大...
    leonaxiong閱讀 2,945評論 1贊 18
  • HTML模版 之后出現(xiàn)的React代碼嵌套入模版中。 1. Hello world 這段代碼將一個一級標(biāo)題插入到指...
    ryanho84閱讀 6,447評論 0贊 9

友情鏈接更多精彩內(nèi)容