React中怎么實現組件內部通信，針對這個問題，這篇文章詳細介紹了相對應的分析和解答，希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。

創(chuàng)新互聯建站是一家專注于成都網站建設、網站制作與策劃設計,陸豐網站建設哪家好?創(chuàng)新互聯建站做網站,專注于網站建設10多年,網設計領域的專業(yè)建站公司;建站業(yè)務涵蓋:陸豐等地區(qū)。陸豐做網站價格咨詢:028-86922220

2. 組件內部數據傳遞

React 組件內部通信主要分為兩部分：數據展示與事件處理。

2.1 數據展示

組件內部數據的展示和更新都是通過 state 來實現的，如果要使用 state 必須使用 ES6 的 class 定義組件。數據更新在雙向數據綁定部分探討，這部分僅討論展示初始化數據。

如果你熟悉 Vue，React 的 state 對象相當于 Vue 的 data 對象

下面是一個純展示數據的示例：

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 組件中，除了生命周期鉤子函數， constructor() 和 render() 著兩個方法也是自動執(zhí)行的，先執(zhí)行 constructor() ，執(zhí)行 constructor() 的同時也是再為 render() 渲染 DOM 做數據準備。

實際上 constructor() 函數是組件生命周期中調用的第一個函數。

2.2 事件

2.2.1 與 DOM 中事件的異同

在 React 中處理事件和在 DOM 中處理事件類似，有兩點不同：

1. React 中通過駝峰命名法命名事件，而不是全是小寫字母；

2. 在 JSX 中直接傳遞函數作為事件處理程序，而不是字符串。

第 2 點不同有坑，后面細說

舉個例子，HTML中的事件：

<button onclick="activateLasers()">
 Activate Lasers
</button>

React 中的事件：

// 因為 jsx 中'{}'里面代表函數表達式，
// 所以傳遞給 onClick 的實際是函數 activateLasers 的函數體部分，
// 因此需要指定 this 指向，不然會報錯
<button onClick={activateLasers}>
 Activate Lasers
</button>

2.2.2 存在的坑

直接傳遞 function 作為 event handler 需要指定函數的執(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ī)則：如果將一個函數的函數體（沒有 () ）賦值給另一個變量，函數體內部的 this 指向可能會發(fā)生變化。會不會變化取決于函數和被賦值的變量是否處于同一個作用域（相同的執(zhí)行環(huán)境）中，但實際使用中，將一個函數賦值給相同作用域的變量沒有意義，那樣的話直接使用那個函數就好，沒必要在賦值給另一個變量。

this 指向不發(fā)生改變的沒有意義的例子（為了方便說明，直接使用 var 操作符）：

var fn = function () {
 console.log(this);
};

var a = fn;

fn(); // window
a(); // window
this 指向發(fā)生改變的例子：

var fn = function () {
 console.log(this);
};

// 將函數體賦值給一個對象的屬性，函數執(zhí)行時 this 和定義時指向不同
var o = {
 a: fn,
};

fn(); // window
o.a(); // o，即{a:f}

如果想要在將函數體賦值另一個變量的同時把原函數的 this 指向也一塊賦值過去，就需要在賦值的過程中進行綁定 this 的操作，如下：

var fn = function () {
 console.log(this);
};

// fn 在賦值的同時將內部的 this 打包一塊賦值給了 a
var o = {
 a: fn.bind(this),
};

fn(); // window
o.a(); // window

通常在將函數體賦值給變量的時候為了避免 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',
 },
};

這實際就是 將函數體賦值給一個對象的屬性，函數執(zhí)行時 this 和定義時指向不同 的場景，和原生語法相同的是 this 指向發(fā)生了改變，不同的是原生 JS 中不管怎樣， this 總歸是有個指向的，而 JSX 直接 undefined 。

所以說不綁定 this 報 undefined 的錯不能全怪 JS 原生語法。

3. 雙向數據綁定

通過 state 傳遞數據加上事件處理程序便能實現數據的雙向綁定，其背后的思想是（以 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 實現
  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中怎么實現組件內部通信問題的解答就分享到這里了，希望以上內容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關注創(chuàng)新互聯成都網站設計公司行業(yè)資訊頻道了解更多相關知識。

另外有需要云服務器可以了解下創(chuàng)新互聯scvps.cn，海內外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

網站題目：React中怎么實現組件內部通信-創(chuàng)新互聯
文章網址：http://chinadenli.net/article20/dhghco.html

成都網站建設公司_創(chuàng)新互聯，為您提供網站改版、電子商務、動態(tài)網站、企業(yè)網站制作、軟件開發(fā)、網站導航

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯