您好,登錄后才能下訂單哦!
React中怎么實現(xiàn)組件內部通信,針對這個問題,這篇文章詳細介紹了相對應的分析和解答,希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。
2. 組件內部數(shù)據傳遞
React 組件內部通信主要分為兩部分:數(shù)據展示與事件處理。
2.1 數(shù)據展示
組件內部數(shù)據的展示和更新都是通過 state 來實現(xiàn)的,如果要使用 state 必須使用 ES6 的 class 定義組件。數(shù)據更新在雙向數(shù)據綁定部分探討,這部分僅討論展示初始化數(shù)據。
如果你熟悉 Vue,React 的 state 對象相當于 Vue 的 data 對象
下面是一個純展示數(shù)據的示例:
class App extends Component { constructor(props) { super(props); // 初始化 state this.state = { inputValue: "test", }; } render() { // 注意,在 react 中,DOM 元素是對象,所以使用‘()'包住 return ( <div className="App"> <p>{this.state.inputValue}</p> </div> ); } }
在通過 class 定義的 React 組件中,除了生命周期鉤子函數(shù), constructor() 和 render() 著兩個方法也是自動執(zhí)行的,先執(zhí)行 constructor() ,執(zhí)行 constructor() 的同時也是再為 render() 渲染 DOM 做數(shù)據準備。
實際上 constructor() 函數(shù)是組件生命周期中調用的第一個函數(shù)。
2.2 事件
2.2.1 與 DOM 中事件的異同
在 React 中處理事件和在 DOM 中處理事件類似,有兩點不同:
React 中通過駝峰命名法命名事件,而不是全是小寫字母;
在 JSX 中直接傳遞函數(shù)作為事件處理程序,而不是字符串。
第 2 點不同有坑,后面細說
舉個例子,HTML中的事件:
<button onclick="activateLasers()"> Activate Lasers </button>
React 中的事件:
// 因為 jsx 中'{}'里面代表函數(shù)表達式, // 所以傳遞給 onClick 的實際是函數(shù) activateLasers 的函數(shù)體部分, // 因此需要指定 this 指向,不然會報錯 <button onClick={activateLasers}> Activate Lasers </button>
2.2.2 存在的坑
直接傳遞 function 作為 event handler 需要指定函數(shù)的執(zhí)行環(huán)境,即需要手動綁定 this ,不然會報 this 為 undefined 的錯。見下面的例子:
class App extends Component { constructor(props) { super(props); this.state = { isToggleOn: true, }; // 手動綁定 this this.handleClick = this.handleClick.bind(this); } handleClick() { // 如果不在 constructor() 方法中手動綁定 this,直接將其作為事件處理程序 this 為 undefined console.log(this); this.setState(prevState => ({ isToggleOn: !prevState.isToggleOn })); } render() { return ( <div className="App"> <button onClick={this.handleClick}> {this.state.isToggleOn ? "on" : "off"} </button> </div> ); } }
2.2.3 為什么會有坑
React 官網 說這個鍋要 JS 原生語法來背,其實不盡然,React 實在 JS 語法早已確定的情況下設計了這樣的事件系統(tǒng),如果一定要有人站出來背鍋,他們五五分吧。
1, JS原生語法存在的問題
JS語法中有這樣的規(guī)則:如果將一個函數(shù)的函數(shù)體(沒有 () )賦值給另一個變量,函數(shù)體內部的 this 指向可能會發(fā)生變化。會不會變化取決于函數(shù)和被賦值的變量是否處于同一個作用域(相同的執(zhí)行環(huán)境)中,但實際使用中,將一個函數(shù)賦值給相同作用域的變量沒有意義,那樣的話直接使用那個函數(shù)就好,沒必要在賦值給另一個變量。
this 指向不發(fā)生改變的沒有意義的例子(為了方便說明,直接使用 var 操作符):
var fn = function () { console.log(this); }; var a = fn; fn(); // window a(); // window this 指向發(fā)生改變的例子: var fn = function () { console.log(this); }; // 將函數(shù)體賦值給一個對象的屬性,函數(shù)執(zhí)行時 this 和定義時指向不同 var o = { a: fn, }; fn(); // window o.a(); // o,即{a:f}
如果想要在將函數(shù)體賦值另一個變量的同時把原函數(shù)的 this 指向也一塊賦值過去,就需要在賦值的過程中進行綁定 this 的操作,如下:
var fn = function () { console.log(this); }; // fn 在賦值的同時將內部的 this 打包一塊賦值給了 a var o = { a: fn.bind(this), }; fn(); // window o.a(); // window
通常在將函數(shù)體賦值給變量的時候為了避免 this 出錯,都會進行 綁定執(zhí)行環(huán)境的操作 ,典型的例子是 var bindId = document.getElementById.bind(document)
2, JSX 存在的問題
因為 JSX 中 DOM 元素也是對象,給元素的屬性賦值實際是給 DOM 元素對象的屬性賦值,見下:
const element = ( <button onClick={this.handleClick}>click me</button> );
等同于
const element = { type: 'button', props: { onClick: this.handleClick, children: 'click me', }, };
這實際就是 將函數(shù)體賦值給一個對象的屬性,函數(shù)執(zhí)行時 this 和定義時指向不同 的場景,和原生語法相同的是 this 指向發(fā)生了改變,不同的是原生 JS 中不管怎樣, this 總歸是有個指向的,而 JSX 直接 undefined 。
所以說不綁定 this 報 undefined 的錯不能全怪 JS 原生語法。
3. 雙向數(shù)據綁定
通過 state 傳遞數(shù)據加上事件處理程序便能實現(xiàn)數(shù)據的雙向綁定,其背后的思想是(以 input 為例):初始化時將 state 中預定義的 state a 賦值給 input,當 input 的 value 發(fā)生改變時,觸發(fā)事件處理程序,將改變后的 value 賦值給狀態(tài) a ,React 監(jiān)測到 state 改變時重新調用 render() 方法,即重新渲染組件,達到雙向綁定的目的。
class App extends Component { constructor(props) { super(props); this.state = { inputValue: "test", }; this.changeInput = this.changeInput.bind(this); } changeInput(e) { // 將改變后的 input 值賦值給 inputValue,通過事件對象 $event.target.value 實現(xiàn) this.setState({ inputValue: e.target.value }); } render() { // input 改變時觸發(fā) changeInput return ( <div className="App"> <input value={this.state.inputValue} onChange={this.changeInput} /> <p>{this.state.inputValue}</p> </div> ); } }
關于React中怎么實現(xiàn)組件內部通信問題的解答就分享到這里了,希望以上內容可以對大家有一定的幫助,如果你還有很多疑惑沒有解開,可以關注億速云行業(yè)資訊頻道了解更多相關知識。
免責聲明:本站發(fā)布的內容(圖片、視頻和文字)以原創(chuàng)、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。