React及npm、ES6

時間 2019-11-24

標籤 react npm es6 欄目 React 简体版

原文原文鏈接

※記住這一點，React項目的基本項目結構包含如下內容:
1.一個源文件夾，用於包含全部JavaScript模塊。
2. 一個index . html文件。在React應用程序中，HTML頁面幾乎是空的。它只負責加載應用程序的JavaScript並提供div(其實是任何其餘元素)，React使用這個div將應用程序的組件呈現到其中。
3.一個package.json文件。package.json是一個標準的npm清單文件，其中包含關於項目的各類信息，如名稱、描述、做者信息等。它容許開發人員指定依賴項(能夠自動下載和安裝)並定義腳本任務。
4.模塊包裝器或構建工具，將用於JSX轉換和模塊/依賴項綁定。使用模塊能夠將JavaScript代碼分解爲多個文件，每一個文件聲明本身的依賴關係，從而幫助組織代碼。模塊捆紮器而後自動按正確的加載順序將全部東西打包在一塊兒。有不少工具能夠處理這個中間步驟，包括Grunt, Gulp,和 Brunch等。您能夠很容易地在這些工具中找到React的方法，可是整體來講，React社區已經將webpack做爲這項工做的首選工具。webpack的核心是一個模塊綁定器，但它也能夠經過加載器來轉換和編譯源代碼。javascript

※.組件的用法與原生的 HTML 標籤徹底一致，能夠任意加入屬性，好比 <HelloMessage name="John"> ，就是 HelloMessage 組件加入一個 name 屬性，值爲 John。組件的屬性能夠在組件類的 this.props 對象上獲取，好比 name 屬性就能夠經過 this.props.name 讀取。html

添加組件屬性，有一個地方須要注意，就是 class 屬性須要寫成 className ，for 屬性須要寫成 htmlFor ，這是由於 class 和 for 是 JavaScript 的保留字。java

來源：http://www.ruanyifeng.com/blog/2015/03/react.htmlreact

※.若是組件類建立、組價類實例化對象不在同一個js文件中，要將組件類exportwebpack

※React 組件git

React組件只是一個JavaScript類，帶有一個render方法，返回組件UI的描述es6

a React component is simply a JavaScript class with a render method that returns a description of the component’s UIweb

※React中import的用法npm

import defaultcomponent,{a,b,c...} from 'XXX'
eg: import React,{Component} from 'react';
導入‘react’文件裏export的一個默認的組件，將其命名爲React以及Component這個非默認組件
import defaultcomponent form 'XXX'
導入XXX文件中的默認組件，命名爲defaultcomponent
import {a} from 'XXX'
導入XXX文件中的a組件
import {a as b} from 'XXX'
導入XXX文件中的a組件，並將其重命名爲b
import * as a from 'XXX'
導入XXX文件中的全部組件，並將其命名爲a，調用具體組件的方式爲a.b、a.c。。。但不包含默認組件
資料：https://blog.csdn.net/naxieren1992/article/details/79582484

json

※.

有2個{{}}，第一{}表明jsx語法開始，第二個是表明dangerouslySetInnerHTML接收的是一個對象鍵值對;

&&event.target.value

&& event.preventDefault()

防止連接打開 URL：阻止元素髮生默認的行爲; 提交按鈕時阻止對錶單的提交

※react-dom

react-dom這個軟件包提供了針對DOM的方法，能夠在你應用的頂層調用，也能夠在有須要的狀況下用做到React模型外面的逃生出口。你的大部分組件都不該該須要使用這個包。

資料：ReactDOM

※React 組件生命週期

React：組件的生命週期

componentWillMount和componentDidMount的區別

一、componentWillMount 將要裝載，在render以前調用；

componentDidMount，（裝載完成），在render以後調用

二、componentWillMount 每個組件render以前當即調用；

componentDidMount render以後並不會當即調用，而是全部的子組件都render完以後才能夠調用

三、componentWillMount 能夠在服務端被調用，也能夠在瀏覽器端被調用；

componentDidMount 只能在瀏覽器端被調用，在服務器端使用react的時候不會被調用

※改變嵌套數組

1.npm install react-addons-update --save

2.import update from 'react-addons-update';

3.let student = {name:'John Caster', grades:['A','C','B']}

let newStudent=update(student,{grade:{$push:['A']}}) ——push：後面追加

let newStuent=update(student,{grade:{$set:['A']}}) ——set： completely change the array

※fetch fetch使用

get使用：

1.引入依賴插件 import 'whatwg-fetch'

2.方法的第一個參數是 url 第二個參數是配置信息。

3.fetch 方法請求數據，返回的是一個 Promise 對象

post使用：

1.fetch 發起一個 post 請求（有method: 'POST'），第一個參數是 url，第二個參數是配置信息。

fetch 提交數據以後，返回的結果也是一個 Promise 對象，跟 get 方法同樣，處理方式也同樣。

※強大的拖拽組件：React DnD 的使用

collect

參數 monitor

monitor 用於查詢當前的拖拽狀態，其對應實例內置了不少方法。

※.React 動畫

建立 React 動畫的五種方式

React.js 實現動畫效果

React動畫實踐

※.生命週期

兩種可以用在 ES6 類組件中的生命週期方法：constructor() 和 render()。

constructor（構造函數）只有在組件實例化並插入到 DOM 中的時候纔會被調用。組件實例化的過程稱做組件的掛載（mount）。

render() 方法也會在組件掛載的過程當中被調用，同時當組件更新的時候也會被調用。每當組件的狀態（state）或者屬性（props）改變時，組件的 render() 方法都會被調用。

在組件掛載的過程當中還有另外兩個生命週期方法：componentWillMount() 和 componentDidMount()。構造函數（constructor）最早執行，componentWillMount() 會在 render() 方法以前執行，而 componentDidMount() 在 render() 方法以後執行。

※.tips

1.綁定的步驟是很是重要的，由於類方法不會自動綁定 this 到實例上。

每次 render() 方法執行時綁定類方法。總結來講組件每次運行更新時都會致使性能消耗。當在構造函數中綁定時，綁定只會在組件實例化時運行一次，這樣作是一個更好的方式。

類方法能夠經過 ES6 的箭頭函數作到自動地綁定。

2.當你使用 ES6 編寫的組件有一個構造函數時，它須要強制地調用 super(); 方法，由於這個 App 組件是 Component 的子類。

3.fitler 方法以一個函數做爲輸入。這個函數能夠訪問列表中的每一項，由於它會遍歷整個列表。經過這種方式，你能夠基於過濾條件來判斷列表的每一項。若是該項判斷結果爲 true，則該項保留在列表中。

4. includes 功能

5.解構

6. 函數式無狀態組件: 這類組件就是函數，它們接收一個輸入並返回一個輸出。輸入是 props，輸出就是一個普通的 JSX 組件實例

7. Object.assign() 函數:它把接收的第一個參數做爲目標對象，後面的全部參數做爲源對象。而後把全部的源對象合併到目標對象中。只要把目標對象設置成一個空對象，咱們就獲得了一個新的對象。當遇到相同的屬性時，排在後面的對象會覆寫先前對象的該屬性。

8.擴展操做符。它只由三個點組成：...。當使用它時，數組或對象中的每個值都會被拷貝到一個新的數組或對象。

9.全部從父組件傳遞給子組件的 props 都會基於子組件的 PropTypes 接口獲得驗證。