React學習筆記一：入門知識概覽

時間 2019-11-24

標籤 react 學習筆記入門知識概覽欄目 React 简体版

原文原文鏈接

一：安裝reactcss

1:直接下載react源碼包，把須要用到的js文件引入本身的頁面便可。html

2:BootCDN 的 React CDN 庫：前端

在頁面代碼中導入便可：node

 <head>
    <meta charset="UTF-8" />
    <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
    <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
    <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
  </head>

二：JSXreact

React 使用 JSX 來替代常規的 JavaScript。數組

咱們能夠在 JSX 中使用 JavaScript 表達式。表達式寫在花括號 {} 中。babel

在 JSX 中不能使用 if else 語句，但可使用 conditional (三元運算) 表達式來替代。框架

React 推薦使用內聯樣式：即先定義一個樣式變量，而後在指定元素樣式時 style=styleVar便可。dom

註釋：{/* 註釋 */}異步

JSX容許在html標籤之間插入數組，而且會自動遍歷數組。

JSX 使用大、小寫的約定來區分本地組件的類和 HTML 標籤：

要渲染 HTML 標籤，只需在 JSX 裏使用小寫字母的標籤名：

var myDivElement = <div className="foo" />;
ReactDOM.render(myDivElement, document.getElementById('example'));

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

var MyComponent = React.createClass({/*...*/});
ReactDOM.render(myElement, document.getElementById('example'));

三：組件

1）建立自定義組件

var HelloMessage = React.createClass({
  render: function() {
    return <h1>Hello World！</h1>;
  }
});

React.createClass 方法用於生成一個組件類 HelloMessage。

原生 HTML 元素名以小寫字母開頭，而自定義的 React 類名以大寫字母開頭。

2）使用組件

ReactDOM.render(
  <HelloMessage />,
  document.getElementById('example')
);

<HelloMessage /> 建立組件類實例。

若是咱們須要向組件傳遞參數，可使用 this.props 對象：

var HelloMessage = React.createClass({
  render: function() {
    return <h1>Hello {this.props.name}</h1>;
  }
});

在添加屬性時， class 屬性須要寫成 className ，for 屬性須要寫成 htmlFor ，這是由於 class 和 for 是 JavaScript 的保留字。

3）組件複合

var WebSite = React.createClass({
  render: function() {
    return (
      <div>
        <Name name={this.props.name} /> //Name是自定義的組件
        <Link site={this.props.site} />  //Link是自定義的組件
      </div>
    );
  }
});

四：狀態

React 把組件當作是一個狀態機。經過與用戶的交互，實現不一樣狀態，而後渲染 UI，讓用戶界面和數據保持一致。

React 裏，只需更新組件的 state，而後根據新的 state 從新渲染用戶界面（不須要操做 DOM）。

每次修改之後，自動調用 this.render 方法，再次渲染組件。

五：參數

state 和 props 主要的區別在於 props 是不可變的，而 state 能夠根據與用戶交互來改變。

因此有些容器組件須要定義 state 來更新和修改數據，而子組件只能經過 props 來傳遞數據。

你能夠經過 getDefaultProps() 方法爲組件 props 設置默認值：

getDefaultProps: function() {
    return {
      name: 'Runoob'
    };
  }

咱們能夠在父組件中設置 state，並經過在子組件上使用 props 將其傳遞到子組件上。

var WebSite = React.createClass({
  getInitialState: function() {／／設置默認值
    return {
      name: "菜鳥教程",
      site: "http://www.runoob.com"
    };
  },
 
  render: function() {
    return (
      <div>
        <Name name={this.state.name} /> //建立子組件實例，把數據傳進去
        <Link site={this.state.site} />
      </div>
    );
  }
});
 
var Name = React.createClass({
  render: function() {
    return (
      <h1>{this.props.name}</h1>//使用props獲取父組件傳進來的參數
    );
  }
});
 
var Link = React.createClass({
  render: function() {
    return (
      <a href={this.props.site}>
        {this.props.site}
      </a>
    );
  }
});

Props 驗證：

使用 propTypes，它能夠保證咱們的應用組件被正確使用，React.PropTypes 提供不少驗證器 (validator) 來驗證傳入數據是否有效。當向 props 傳入無效數據（好比：類型不對）時，JavaScript 控制檯會拋出警告，前端也不會產生輸出。

var MyTitle = React.createClass({
  propTypes: {
    title: React.PropTypes.string.isRequired,
  },

驗證器有：

 propTypes: {
    // 能夠聲明 prop 爲指定的 JS 基本數據類型，默認狀況，這些數據是可選的
    optionalArray: React.PropTypes.array,
    optionalBool: React.PropTypes.bool,
    optionalFunc: React.PropTypes.func,
    optionalNumber: React.PropTypes.number,
    optionalObject: React.PropTypes.object,
    optionalString: React.PropTypes.string,
 
    // 能夠被渲染的對象 numbers, strings, elements 或 array
    optionalNode: React.PropTypes.node,
 
    //  React 元素
    optionalElement: React.PropTypes.element,
 
    // 用 JS 的 instanceof 操做符聲明 prop 爲類的實例。
    optionalMessage: React.PropTypes.instanceOf(Message),
 
    // 用 enum 來限制 prop 只接受指定的值。
    optionalEnum: React.PropTypes.oneOf(['News', 'Photos']),
 
    // 能夠是多個對象類型中的一個
    optionalUnion: React.PropTypes.oneOfType([
      React.PropTypes.string,
      React.PropTypes.number,
      React.PropTypes.instanceOf(Message)
    ]),
 
    // 指定類型組成的數組
    optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number),
 
    // 指定類型的屬性構成的對象
    optionalObjectOf: React.PropTypes.objectOf(React.PropTypes.number),
 
    // 特定 shape 參數的對象
    optionalObjectWithShape: React.PropTypes.shape({
      color: React.PropTypes.string,
      fontSize: React.PropTypes.number
    }),
 
    // 任意類型加上 `isRequired` 來使 prop 不可空。
    requiredFunc: React.PropTypes.func.isRequired,
 
    // 不可空的任意類型
    requiredAny: React.PropTypes.any.isRequired,
 
    // 自定義驗證器。若是驗證失敗須要返回一個 Error 對象。不要直接使用 `console.warn` 或拋異常，由於這樣 `oneOfType` 會失效。
    customProp: function(props, propName, componentName) {
      if (!/matchme/.test(props[propName])) {
        return new Error('Validation failed!');
      }
    }
  },

六：組件API

設置狀態：setState：

不能在組件內部經過this.state修改狀態，由於該狀態會在調用setState()後被替換。

setState()並不會當即改變this.state，而是建立一個即將處理的state。setState()並不必定是同步的，爲了提高性能React會批量執行state和DOM渲染。

setState()老是會觸發一次組件重繪，除非在shouldComponentUpdate()中實現了一些條件渲染邏輯。

替換狀態：replaceState
設置屬性：setProps

props至關於組件的數據流，它老是會從父組件向下傳遞至全部的子組件中。當和一個外部的JavaScript應用集成時，咱們可能會須要向組件傳遞數據或通知React.render()組件須要從新渲染，可使用setProps()。

替換屬性：replaceProps
強制更新：forceUpdate
獲取DOM節點：findDOMNode
判斷組件掛載狀態：isMounted

可使用該方法保證了setState()和forceUpdate()在異步場景下的調用不會出錯。

七：組件生命週期

組件的生命週期可分紅三個狀態：

Mounting：已插入真實 DOM
Updating：正在被從新渲染
Unmounting：已移出真實 DOM

生命週期的方法有：

componentWillMount 在渲染前調用,在客戶端也在服務端。
componentDidMount : 在第一次渲染後調用，只在客戶端。以後組件已經生成了對應的DOM結構，能夠經過this.getDOMNode()來進行訪問。若是你想和其餘JavaScript框架一塊兒使用，能夠在這個方法中調用setTimeout, setInterval或者發送AJAX請求等操做(防止異部操做阻塞UI)。
componentWillReceiveProps 在組件接收到一個新的prop時被調用。這個方法在初始化render時不會被調用。
shouldComponentUpdate 返回一個布爾值。在組件接收到新的props或者state時被調用。在初始化時或者使用forceUpdate時不被調用。
能夠在你確認不須要更新組件時使用。
componentWillUpdate在組件接收到新的props或者state但尚未render時被調用。在初始化時不會被調用。
componentDidUpdate 在組件完成更新後當即調用。在初始化時不會被調用。
componentWillUnmount在組件從 DOM 中移除的時候馬上被調用。