React學習筆記

時間 2019-11-08

標籤 react 學習筆記欄目 React 简体版

原文原文鏈接

該篇是閱讀React官方文檔學習React的筆記內容javascript

React是什麼

React是用於構建用戶界面的JavaScript庫。由FaceBook開發的，能簡單，快速，高效地開發複雜和交互式的Web和移動UI。優勢體如今開發效率、維護、組合擴展、生態、組件化思想等。如今，React有一個很大的支持社區。
React的特色:css

聲明式。配合使用JSX，以聲明式編寫UI, 使得代碼編寫容易，容易理解和維護。
組件化。經過React組件來構建各類UI，組件擁有狀態，當狀態數據改變時，React能有效地更新並正確地渲染組件。
跨平臺。一次學習，隨處編寫。能夠在Web開發中使用，也可使用 Node 進行服務器渲染，還可使用基於React的 React Native 開發原生移動應用。

Hello React

由於React自己是一個JavaScript庫，因此只要在HTML文件中經過script 標籤引入相關的一些js文件，就能夠直接用React來編寫UI了。html

<!DOCTYPE html>
<html> <head> <meta charset="UTF-8" /> <title>Hello React</title> <script src="https://unpkg.com/react@16/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> </head> <body> <div id="root"></div> <script type="text/babel"> ReactDOM.render( <h1>Hello, React!</h1>, document.getElementById('root') ); </script> </body> </html> 複製代碼

在瀏覽器控制檯中打印出React的值，能夠看到React是一個對象，有不少的屬性。java

大多的屬性的屬性值是方法。React.createElement就是咱們經常使用的用來建立React元素。

JSX

JSX(JavaScript XML)是 JavaScript 定義的一套用於描述UI的擴展語法。使用JSX來編寫UI，使得代碼的可讀性更好。在React開發中，常常會使用JSX來寫組件。react

JSX語法

JSX語法有以下一些規則：web

自定義組件使用是必須首字母大寫，首字母不大寫會直接解析爲同名html標籤
屬性名稱用camelCase來定義
對於字符串值，用引號
對於表達式，用大括號，能夠在大括號內放置任何有效的 JavaScript 表達式。
一個標籤裏面沒有內容，可使用 /> 來閉合標籤
JSX中編寫註釋用大括號將/* */語句包起來

<div>
    <div className="shopInfo"></div>;
    <div tabIndex="0"></div>;
    <img src={user.avatarUrl}></img>;
    {/* 註釋寫在這裏 */}
    Hello, {name}!
    {/* 多行註釋 
    也一樣有效。 */}
</div>
複製代碼

JSX和HTML的區別有chrome

key、ref 和 dangerouslySetInnerHTML屬性只在JSX中存在
使用到HTML的標記元素的class屬性名稱在JSX中是className
JSX中事件要使用小駝峯式寫法
style中的css屬性要使用小駝峯式寫法

React元素

React元素就是JSX表達式的值，經過React元素來渲染屏幕上的內容。ReactDOM 會負責更新 DOM 來與 React 元素保持一致。將一個React元素渲染到HTML的節點（假設id = 'root'）上的方法是把它們傳入ReactDOM.render()方法中設計模式

const element = <h1>Hello, world</h1>;
ReactDOM.render(element, document.getElementById('root'));
複製代碼

ReactDOM 會將元素和它的子元素與它們以前的狀態進行比較，並只會進行必要的更新來使 DOM 達到預期的狀態，從而提升性能。瀏覽器

React組件

React組件使用一個名爲 render() 的方法，接收輸入的數據並返回須要展現的內容，展現的內容是由React元素構成的。最簡單的React組件服務器

建立一個繼承於React.Component的class
建立render方法並實現

class Welcome extends React.Component {
  render() {
    return <div>Hello</div>;
  }
}
複製代碼

自定義組件名稱必須以大寫字母開頭。
在React應用中，UI是由一系列React組件構建起來的。這些組件將整個UI分紅小的、獨立的甚至是可重用的部分。一個組件的變更不會影響到另外一個組件。

組件數據管理

React元素會將 JSX 所接收的屬性（attributes）轉換爲單個對象傳遞給組件，這個對象被稱之爲「props」。
組件有兩個很重要的屬性props 和 state。
組件使用外部數據 this.props
組件維護內部數據 this.state 和 this.setState()
組件的props屬性是隻讀的，它們老是在整個應用中從父組件傳遞到子組件。子組件永遠不能將 prop 送回父組件。這有助於維護單向數據流。即組件不能修改自身的props。
組件的state屬性是私有的，而且徹底受控於當前組件。隨用戶操做、網絡響應或者其餘變化而須要動態更新UI的能夠經過更新其state來實現。

修改this.state須要經過this.setState()方法，不要直接修改this.state
state的更新多是異步的
state的更新會被合併

當組件的狀態發生變化時，組件會再次調用render()方法從新渲染。

React組件生命週期

分三個階段：掛載階段、更新階段和卸載階段，始終使用props 參數來調用父類的構造函數

掛載階段：組件即將開始被添加到DOM階段。
更新階段：一旦組件被添加到DOM，它只有在 props 或state發生變化時纔可能更新和從新渲染。卸載階段：組件被銷燬並從 DOM 中刪除。這是組件生命週期的最後階段。
一些重要的生命週期方法：

componentWillMount() – 在渲染以前執行，在客戶端和服務器端都會執行。
componentDidMount() – 僅在第一次渲染後在客戶端執行。
componentWillReceiveProps() – 當從父類接收到 props 而且在調用另外一個渲染器以前調用。
shouldComponentUpdate() – 根據特定條件返回 true 或 false。若是你但願更新組件，請返回true 不然返回 false。默認狀況下，它返回 false。
componentWillUpdate() – 在 DOM 中進行渲染以前調用。
componentDidUpdate() – 在渲染髮生後當即調用。
componentWillUnmount() – 從 DOM 卸載組件後調用。用於清理內存空間。

關於componentWill系列方法，在React16.9中提到

React組件事件處理

React元素同html標籤元素同樣，能夠響應事件，其語法要求是

React事件的命名採用小駝峯
傳入一個函數做爲事件處理函數
須要顯示調用preventDefault方法來阻止默認行爲
在 JavaScript 中，類的方法默認不會綁定 this, 因此若是直接在React元素的響應事件方法中訪問this，獲得的值是undefined，所以，須要經過bind綁定。在構造函數中綁定

class Foo extends Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    console.log('Click happened');
  }
  render() {
    return <button onClick={this.handleClick}>Click Me</button>;
  }
}
複製代碼

直接在render函數中綁定

class Foo extends Component {
  handleClick() {
    console.log('Click happened');
  }
  render() {
    return <button onClick={this.handleClick.bind(this)}>Click Me</button>;
  }
}
複製代碼

若是不想綁定bind，能夠用箭頭函數。

class LoggingButton extends React.Component {
  handleClick() {
    console.log('this is:', this);
  }

  render() {
    return (
      <button onClick={(e) => this.handleClick(e)}> Click me </button>
    );
  }
}
複製代碼

在 render 方法中使用 Function.prototype.bind 和箭頭函數都會在每次組件渲染時建立一個新的函數, 這會影響性能。
5. 事件處理函數傳遞參數

<button onClick={() => this.handleClick(id)} />
 // 等價
<button onClick={this.handleClick.bind(this, id)} />

複製代碼

向事件處理函數傳遞參數時，若是事件處理函數是箭頭函數，事件對象必須顯式的進行傳遞，若是是bind方式，事件對象能夠被隱式傳遞。

組件更多語法

基本上就是將js的語法和JSX組合起來靈活的構建組件，好比條件語句、循環語句等。組件的className也能夠是變量，根據不一樣的值來展現對應的樣式。

class Demo extends React.Component {
  const numbers = [1, 2, 3, 4, 5];
  const isShow = props.isShow
  render() {
      return <h1>Hello</h1>;
    
      const listItems = numbers.map((number) =>
        <li key={number.toString()}>
          {number}
        </li>
      );
      
      const showItem = isShow ? <div> showItem </div> : null
      return (
        <ul>{listItems}</ul>
        {showItem}
      );
  }
}
複製代碼

由於JSX容許在大括號中嵌入任何表達式，因此上面render方法中的變量對應的表達式能夠直接放到return中，替換掉變量

如下內容研究不深，等之後在實際開發中涉及到相關知識點的時候再回來研究🤦‍♀️

React調試插件

React Developer Tools 插件: chrome.google.com/webstore/de…

代碼分割

爲了按需加載代碼，提升性能，React支持和提供了一些組件

動態 import() 語法
React.lazy，React.lazy 目前只支持默認導出（default exports）
Suspense組件
異常捕獲組件
路由分割

Context

Context提供了一種在組件之間共享數據的方式，而不須要顯式地經過props屬性由父及子的傳遞數據。

渲染錯誤捕獲

React支持自定義錯誤邊界組件來捕獲渲染出錯的子組件。
若是一個React組件中定義了 static getDerivedStateFromError() 或 componentDidCatch() 這兩個生命週期方法中的任意一個（或兩個）時，那麼它就變成一個錯誤邊界。當拋出錯誤後，可在getDerivedStateFromError() 方中更改狀態變量來控制渲染備用UI ，在componentDidCatch() 方法中打印錯誤信息

React.forwardRef

Refs 是React 元素的一個屬性，用於對 render() 返回的特定元素或組件的引用。即給JSX元素 ref 屬性，而後就能夠經過ref屬性值來獲取該節點的引用。經常使用場景有

須要管理焦點、選擇文本或媒體播放時
觸發式動畫
與第三方 DOM 庫集成

React.Fragment

React.Fragment 能夠聚合一個子元素列表，可是不會在DOM中增長額外節點。
在 React 中， <></> 是 <React.Fragment/> 的語法糖。
React.Fragment 有屬性值key

高階組件

高階組件是參數爲組件，返回值爲新組件的函數，也就是經過一個函數將一個組件轉換爲另外一個組件。
高階組件是基於React的組合特性而造成的設計模式。主要是爲了複用組件的邏輯。不要在render方法中使用高階組件，由於每次都會生成新的組件，致使子樹每次渲染都會卸載、和從新掛載，而且沒法保留以前組件及其子組件的狀態。
HOC可用於許多任務，例如：代碼重用，邏輯和引導抽象
渲染劫持
狀態抽象和控制
Props 控制