React學習

時間 2019-12-06

標籤 react 學習欄目 React 简体版

原文原文鏈接

table組件，增長滾動條scroll={{ x: 1620, y: 600 }}
html

<Table
            loading={this.state.loading}
            bordered
            columns={columns}
            dataSource={this.state.tableData}
            pagination={this.state.pagination}
            scroll={{ x: 1620, y: 600 }}
            onChange={this.handleTableChange}
          />
複製代碼

滾動條滑動的時候固定左邊的列 fixed: 'left'。
node

render: (text, record) => ( ) 與render: (text, record) => {} 區別
前面的只能寫表達式結果，或者三目運算符，後面的能夠寫任意js函數。
react

ES5語法
箭頭函數
var foo = function(){return 1;};
//等價於
let foo = () => 1;
箭頭函數中的 this 指的不是window，是對象自己
後端

function aa(){
  this.bb = 1;
  setTimeout(() => {
    this.bb++; //this指向aa
    console.log(this.bb);
  },500);
}

aa(); //2
複製代碼

箭頭函數的原理 this指向的固定化，並非由於箭頭函數內部有綁定this的機制，實際緣由是箭頭函數根本沒有本身的this，致使內部的this就是外層代碼塊的this。正是由於它沒有this，因此也就不能用做構造函數。因此，箭頭函數轉成ES5的代碼以下：數組

// ES6
function foo() {
  setTimeout(() => {
    console.log('id:', this.id);
  }, 100);
}

// ES5
function foo() {
  var _this = this;

  setTimeout(function () {
    console.log('id:', _this.id);
  }, 100);
}
上面代碼中，轉換後的ES5版本清楚地說明了，箭頭函數裏面根本沒有本身的this，而是引用外層的this。

複製代碼

var與let、const的區別
瀏覽器

var a = 100;
console.log(a,window.a);    // 100 100

let b = 10;
console.log(b,window.b);    // 10 undefined

const c = 1;
console.log(c,window.c);    // 1 undefined
複製代碼

ES6 推薦在函數中使用 let 定義變量
const 用來聲明一個常量 (值相似值不能改變，引用類型地址不能改變)
let 和 const 只在最近的一個塊中（花括號中）有效
bash

Flux的最大哲學是數據是單向流動的。
babel

ref是react中DOM鉤子,直接操做DOM
架構

定義一個最簡單的組件,無狀態組件
函數

React跟數據有關係的三個屬性state props context
context的精髓是能夠跨級傳輸數據

若是非要從下到上傳輸數據，子組件要把數據返回給父組件，只能用奇淫技巧。父組件傳一個函數給子組件，子組件經過傳參將數據返回給父組件的函數，父組件的函數接受實參改變父組件中的state等值。
例如：

React.PropTypes返回的是一系列驗證函數，用於確保接收的數據相似是不是有效的。

class Greeting extends React.Component {
    render() {
        return (
            <h1>Hello {this.props.name}</h1>
        )
    };
}
Greeting.propTypes = {
    name: React.PropTypes.string.isRequired
};
複製代碼

1.React要求自定義組件必須是大寫字母開頭，小寫會被當作默認DOM元素來渲染。
2.React要求自定義組件必須繼承React.Component類。
3.jsx不能直接運行，是被babel-loader中的react這個preset翻譯的:
4.標籤必須關閉，class要寫成className ,for要寫成htmlFor。
5.html註釋不能使用，只能使用js註釋。
6.原生標籤好比p、li、div若是要使用自定義屬性，必須使用data-前綴。

react列表自增序號問題：

{ title: '序號', dataIndex: 'id', key: 'id',
        render: (text,record,index)=>(index+1)
      }
複製代碼

react對於頁面動態元素的問題。
顯示的時候以數組的方式循環顯示。

當增長一個元素的時候，往數組裏面增長值。
當刪除的時候經過數組的filter過濾掉傳進來的index，刪除掉過濾掉的數據。
contactPeopleListTemp = contactPeopleListTemp.filter((item,_index) => index !== _index);
map通常作修改操做，轉換後數組大小是一致的，filter是作刪除操做，元素個數能夠減小。

問題1 函數參數爲何能夠不一致。

<Select style={{width: 200}}
                        value={status}
                        onChange={this.handleChange.bind(this)}>
                  <Option value="">請選擇</Option>
                  <Option value="0">a</Option>
                  <Option value="1">b</Option>
                  <Option value="2">c</Option>
                </Select>
                
             handleChange = (value, option = null) => {
                console.table(['111',value]);
                let statusTarget = value;
                this.setState({status: statusTarget});
              }

複製代碼

onChange函數默認傳value能夠不用指定。
jsx語法舉例：

{
                 status == 2 &&
                 <Select defaultValue="2019" style={{width: 200, "margin-left": "10px"}} onChange={this.handleChange}>
                   {yearList && yearList.map(item => <Option value={item} key={item}>{item}</Option>)}
                 </Select>
               }
   ```
   大括號中的就是js語句，能夠用&&符號判斷顯示方式。
   
   
通用函數寫法 <br>
1. onChange函數或者onClick函數 獲取函數值有兩種默認的方式， 一種是直接傳值，一種是傳event對象。<br>
經過一個判斷能夠獲取他們的值let value = typeof event === 'object' && !Array.isArray(event) ? event.target.value : event。<br>
2. 設置state的值的時候能夠經過函數傳值了。只要在setstate的方法中在原變量的外面加上中括號[ ]，這個就是變量了。
3. 設置某個數組的某個屬性，通常是listItem[index].name="username"。若是屬性name也想經過變量的方式傳遞的話，則加上中括號省去那個點，就能夠了:如listItem[index][name]="username"。<br>

複製代碼

changeItemValue = (index, listName, attrName, event) => {

let value = typeof event === 'object' && !Array.isArray(event) ? event.target.value : event;
listName[index][attrName] = value;
this.setState({
  [listName]: listName
})
複製代碼

}

對於空字符串及undefined,能夠統一用實體作判斷就能夠。好比name多是"",也多是undefined，用判斷if(name)作判斷。<br>

react對時間的格式化方式<br>
1.引入import moment from "moment";<br>
2.moment(newDate).format('YYYY-MM-DD')<br>

下拉框同時獲取顯示名稱和值。<br>
<Option value="值">顯示名稱</Option>  <br>
<select>標籤調用onChange函數函數中會匿名傳兩個參數<br>
   
   ```
   <select onChange={this.handleOnChange}> <Option value="值">顯示名稱</Option> </select>
   handleOnChange = (value, option = null) => {
    value    \\下拉框的值
    option.props.children  \\顯示名稱
   };
   ```
   
1.數組定義<br>
 let cc = ['姓名', '年齡', 2, {'性別':'男'}]   // 數組 <br>
 var a = [1, 2, 3];
 for (var i in a) {
   console.log(a[i]); 
 } 
 
 數組的使用，放在react代碼中，能夠自動展開<br>
 class News extends React.Component{
   constructor(props){
       super(props)
       this.state={
           msg:'新聞', 
           list:['1111','2222','3333']
       } 
   } 
   render(){ 
       let listResult=this.state.list.map(function(value,key){
           return (<li key={key}>{value}</li>)
       })        
       return(
           <div> 
               <ul>
                   {listResult}
               </ul> 
           </div>
       )
   }
}
複製代碼

父子組件傳值

<MyCompo a="66" b="77" c={88}></MyCompo>
子組件獲取值 {this.props.a}  {this.props.b}
複製代碼

在子組件中props是隻讀的，不能修改。

React能夠搭配Flux等架構（Redux實現）使用。
有Flux架構護航，數據的單向流動，自稱是比MVC，MVVM更高一級的模式。
React 使用jsx語法糖

瀏覽器工做流
建立DOM樹
一旦瀏覽器接收到一個HTML文件，渲染引擎（render engine）就開始解析它，並根據HTML元素（elements）一一對應地生成DOM 節點（nodes），組成一棵DOM樹。

建立渲染樹
同時，瀏覽器也會解析來自外部CSS文件和元素上的inline樣式。一般瀏覽器會爲這些樣式信息，連同包含樣式信息的DOM樹上的節點，再建立另一個樹，通常被稱做渲染樹（render tree）

建立渲染樹背後的故事
WebKit內核的瀏覽器上，處理一個節點的樣式的過程稱爲attachment。DOM樹上的每一個節點都有一個attach方法，它接收計算好的樣式信息，返回一個render對象（又名renderer） Attachment的過程是同步的，新節點插入DOM樹時，會調用新節點的attach方法。構建渲染樹時，因爲包含了這些render對象，每一個render對象都須要計算視覺屬性（visual properties）；這個過程經過計算每一個元素的樣式屬性來完成。

佈局 Layout
又被簡稱爲Reflow[2] 構造了渲染樹之後，瀏覽器引擎開始着手佈局（layout）。佈局時，渲染樹上的每一個節點根據其在屏幕上應該出現的精確位置，分配一組屏幕座標值。

繪製 Painting
接着，瀏覽器將會經過遍歷渲染樹，調用每一個節點的paint方法來繪製這些render對象。paint方法根據瀏覽器平臺，使用不一樣的UI後端API（agnostic UI backend API）。經過繪製，最終將在屏幕上展現內容。

Virtual DOM技術
DOM操做真正的問題在於每次操做都會觸發佈局的改變、DOM樹的修改和渲染。因此，當你一個接一個地去修改30個節點的時候，就會引發30次（潛在的）佈局重算，30次（潛在的）重繪，等等。 Virtual DOM 實際上沒有使用什麼全新的技術，僅僅是把「雙緩衝（double buffering）」技術應用到了DOM上面。
這樣一來，當你在這個單獨的虛擬的DOM樹上也一個接一個地修改30個節點的時候，它不會每次都去觸發重繪，因此修改節點的開銷就變小了。
以後，一旦你要把這些改動傳遞給真實DOM，以前全部的改動就會整合成一次DOM操做。這一次DOM操做引發的佈局計算和重繪可能會更大，可是相比而言，整合起來的改動只作一次，減小了（屢次）計算。不過，實際上不借助Virtual DOM也能夠作到這一點。你能夠本身手動地整合全部的DOM操做到一個DOM 碎片（DOM fragment）裏，而後再傳遞給DOM樹。

Virtual DOM到底解決了什麼問題。
首先，它把管理DOM碎片這件事情自動化、抽象化了，使得你無需再去手動處理。另外，當你要手動去作這件事情的時候，你還得記得哪些部分變化了，哪些部分沒變，畢竟以後重繪時，DOM樹上的大量細節你都不須要從新刷新。這時候Virtual
DOM的自動化對你來講就很是有用了，若是它的實現是正確的，那麼它就會知道到底哪些地方應該須要刷新，哪些地方不要。
最後，Virtual DOM經過各類組件和你寫的一些代碼來請求對它進行操做，而不是直接對它自己進行操做，使你沒必要非要跟Virtual DOM交互，也沒必要非要去了解Virtual
DOM修改DOM樹的原理，也就不用再想着去修改DOM了。對開發者來講，Virtual DOM幾乎是徹底透明的。這樣你就不用在修改DOM 和整合DOM操做爲一次之間作同步處理了。