1. react中函數調用方法
方式一：內聯調用法
import React, { Component }from 'react';
class funcextends Component{
constructor(porps){
super(props);
}
funcOne(){
console.log('內聯調用法')
}
render(){
return (
)
}
}
方式二：配置中調用法
import React, { Component }from 'react';
class funcextends Component{
constructor(porps){
super(props);
this.funcTwo =this.funcTwo.bind(this)
}
funcTwo(){
console.log('配置中調用法')
}
render(){
return (
)
}
}
方式三：箭頭函數調用法（最推薦）import React, { Component }from 'react';
class funcextends Component{
constructor(porps){
super(props);
}
funcThree:() => {
console.log('箭頭函數調用法')
}
render(){
return (
)
}
}
2. react 調用方法
情況一：
constructor(props) { super(props); this.login = this.login.bind(this);
}
login(a,b,c) { console.log(this);//列印這個組件本身
console.log(a);//列印111111
console.log(b);//undefined
console.log(c);//undefined}
<button onClick={()=>{this.login(111111)}} />
情況二：
constructor(props) { super(props); this.login = this.login.bind(this);
}
login(a,b,c) { console.log(this);//列印這個組件本身
console.log(a);//列印Proxy對象：Proxy裡面可以獲得dom元素
console.log(b);//列印event
console.log(c);//undefined}
<button onClick={this.login} />
情況三：
constructor(props) { super(props); // this.login = this.login.bind(this);}
login(a,b,c) { console.log(this);//列印這個組件本身，說明我們用箭頭函數的時候，不需要bind(this),react自動把this指向了組件自己，
console.log(a);//列印出了111111
console.log(b);//undefined
console.log(c);//undefined}
<button onClick={()=>{this.login(111111)}} />
情況四：
constructor(props) { super(props); // this.login = this.login.bind(this);}
login(a,b,c) { console.log(this);//列印null,這是react最常見的坑，this本來指向window，但是經過react初始化之後，指向了null;
console.log(a);//列印Proxy對象：Proxy裡面可以獲得dom元素
console.log(b);//列印event
console.log(c);
}
<button onClick={this.login} />
情況五：
constructor(props) { super(props); // this.login = this.login.bind(this);}
login(a,b,c) { console.log(this);//列印這個組件本身
console.log(a);//undefined
console.log(b);//undefined
console.log(c);//undefined}
<button onClick={()=>{this.login()}} />
情況六：(可以算作es5的最佳實踐，用的es5的方法，拿到所有參數)
constructor(props) { super(props); // this.login = this.login.bind(this);
this.login=(a,b,c)=>{ console.log(this);//列印這個組件本身
console.log(a);//111111
console.log(b);//列印Proxy對象：Proxy裡面可以獲得dom元素
console.log(c);//列印event：
}
}
<button onClick={this.login.bind(this,111111)} />
最佳實踐：(for es6) 老版本
constructor(props) { super(props); // this.login = this.login.bind(this);}
login(type,event,proxy) { console.log(this);//列印這個組件本身
console.log(event);//列印event：
console.log(proxy);//列印Proxy對象,event詳情請查驗es6}
<button onClick={()=>{let target=this, handler={};this.login('boss',event,new Proxy(target, handler))}}/>
最佳實踐：2018（需要傳參）
constructor(props) { super(props);
}
login=(num, evt)=>{ console.log(num);//列印傳參
console.log(evt);//列印event：}
<button onChange={this.login.bind(null, 111)}/>
最佳實踐：2018（不需要傳參）
constructor(props) { super(props);
}
login=( evt)=>{ console.log(evt);//列印event：}
<button onChange={this.login}/>
3. react 函數式組件ref的使用
1、ref的定義
React中的ref屬性可以幫助我們獲取子組件的實例或者Dom對象，進而對組件進行修改
場景，點擊A調用B的方法：（單文件中使用ref）
1、引入useRef並定義ref對象
2、綁定ref對象
3、調用
點擊上傳圖片按紐時，調用ref對象的方法
4. React 類組件和函數組件
1、組件：能跟其他物件組合起來的物件
2、就目前而言，一個返回React元素的「函數」就是組件
3、在Vue里，一個構造選項就可以表示一個組件
元素與組件
元素：const div = React.createElement('div',...)
//這是一個React元素（d是小寫的）
組件：const Div = ()=>React.createElement('div'..)
//這是一個React組件（D是大寫的）
1、類組件
類組件注意事項：
2、函數組件
函數組件注意事項：
沒有 this，一律使用參數和變數
類組件的事件綁定
但這樣寫不如聲明addN結構清晰
最終的方案,類組件的事件綁定最好的方法
5. react函數式組件及類式組件
函數式組件中this是undefined，需注意。
1.React解析組件標簽，找到了MyComponent組件；
2.發現組件是使用函數定義的，隨後調用該函數，將返回的虛擬dom轉為真實dom，渲染在頁面。
1.React解析組件標簽，找到了MyComponent組件;
2.發現組件是使用類定義的，隨後new出來該類的實例，並通過該實例調用到原型上的render方法;
3.將render返回的虛擬dom轉為真實dom，渲染在頁面。
6. 【譯】在 React 中擁抱函數——無狀態函數式組件及其重要性
本篇文章 不是向您介紹任何最佳實踐 或者使用 React 編寫應用的某個「唯一方式」。
本文講述的都是關於 React 中的 無狀態函數式組件 (stateless functional component) 以及為什麼它們可能有用或為什麼應首先受到考慮。
在我們探討這個問題之前，我們先了解一下在 React 上下文中函數式組件的定義。它本質上就是一個常規的函數，接收一個 props 並返回一個元素。
使用 ES6 的 箭頭函數 和 解構 ，我們也可以這樣編寫：
初看，這與使用 createClass 和 ES6 Class 並沒有什麼特別之處，無狀態函數式組件僅僅是一種編寫風格。但是從我的觀點來看卻有很多不同。
現在讓我們看一下函數式組件和基於類的方式的不同之處，並根據給定的事實，我們能推導出什麼有價值的內容。
函數式組件，有時也被稱為 無狀態組件 ，沒有任何生命周期方法，意味著每次上層組件樹狀態發生變更時它們都會重新渲染，這就是因為缺少 shouldComponentUpdate 方法導致的。這也同樣意味著您不能定義某些基於組件掛載和卸載的行為。
更有趣的是您在函數式組件中既不能使用 this 關鍵字或訪問到 ref 。對於習慣了嚴格意義上的類或面向對象風格的人來說，這很讓他們驚訝。這也是使用函數最大的爭論點。
另一個有趣的事實就是您仍然可以訪問到 context ， 如果您將 context 定義為函數的一個 props 。
所以您可能會問自己，它的優勢究竟體現在哪裡。特別是您已經使用了 React 並傾向於使用基於類的方式。當我們擁抱這個概念的時候， 容器型組件 (container component) 和 展示型組件 (presentational component) 的概念就會變得非常清晰。您也可以閱讀 Dan Abramov 關於此主題的 文章 以獲取更深的了解。
通過將邏輯和數據處理與 UI 展示剝離開來，我們就可以避免在展示型組件中處理任何的狀態。 無狀態函數式組件強制實施了這樣的風格 ，因為您無論如何都沒有辦法處理本地狀態了。它強制您將任何的狀態處理移交至上層的組件樹，而讓下層的組件只做它們所做的——關注 UI 的展示。
沒有邏輯意味著相同的表示具有相同的數據。
在編寫無狀態函數式組件時，您需要避免某些特定的模式。避免在函數式組件中定義函數，這是因為每一次函數式組件被調用的時候，一個新的函數都會被創建。
這個問題很容易解決，您可以將這個函數作為 props 傳遞進去，或者將它定義在組件外面。
有時候談起無狀態函數式組件會提到 純 (pure) 這個詞。在這方面您應該避免使用 context 或 defaultProps，如果您需要定義上述任何一個或兩個，您應該選擇基於類的方式。
至於 defaultProps，一個變通的方案就是使用默認參數。
關於純函數，請查看 Bernhard Gschwantner 的 評論 ，他總結得非常完美。
另一個常見陷阱就是簡單地認為使用純無狀態函數式組件可以獲得性能上的提升。這個觀點是不正確的。 相反，當我們需要處理大量無狀態函數型組件的時候，它的對立觀點卻是正確的。
性能問題是由於缺少生命周期方法導致的，這就意味著 React 沒有訪問任何額外的方法並且總是渲染組件。
缺少聲明周期方法在另一方面也導致了沒法定義 shouldComponentUpdate 方法。因此，我們不能夠告訴 React 是重新渲染還是不渲染，這也就導致了永遠都會重新渲染。接下來我們將會了解到緩解這種問題的方法。
如果您想了解更多高階組件以及使用它們的優點，請查看 Why The Hipsters Recompose Everything 。
高階組件是一種接收組件為參數並返回一個新的組件的函數。
這種方式可以讓我們解決許多因使用無狀態函數式組件而導致的問題。簡言之，我們可以將函數式組件封裝進高階組件以解決狀態處理和渲染優化這樣的問題，高階組件可以幫助我們關注本地狀態處理以及 shouldComponentUpdate 函數的實現。
Recompose 就幫我們解決了以上提到的情況。
下面的這個例子是直接從這個項目 README 文件中拿來的。
正如上面所示，我們可以將精力集中於 UI 表示並在需要的時候將函數封裝進一個純函數並導出這個封裝的函數。我們就不需要將原始的函數重構為一個類組件。
下面的示例來自於 Why The Hipsters Recompose Everything 。
withState 使得我們在有需要的時候管理本地組件狀態，只需將我們的無狀態函數式組件傳遞給 enhance 函數即可。
同樣，recompose 已經實現了 withState ，所以就沒有必要自己再去實現它了。
使用無狀態函數式組件最大的好處就是它能夠將容器型和展示型組件明確區分開來，避免產生大型以及雜亂的組件。沒有 this 關鍵字也就意味著沒有快捷方式在整個應用中隨機地展開狀態。
當一個開發團隊中人員經驗存在差別時，這些方面就會變得異常有用，它會幫助我們間接地執行內部開發的標准。