React でコンポーネントの内部通信を実装する方法

この記事ではReactのデータ送信におけるコンポーネントの内部通信方法を中心に紹介しますので、参考にしてください。

1. 概要

プライマリ フロントエンドをしばらく離れると、スタイルの作成に費やす時間がますます減り、データの処理に費やす時間がますます増えていることがわかります。データを処理するプロセスはビジネス ロジックを実装するプロセスでもあり、間違いなくプロジェクトで最も重要です。

フロントエンド フレームワークを学習し、基本的な構文を理解したら、次のステップはデータの転送方法を学習することです。

Angular 設計の最初のハイライトの 1 つは、データの双方向バインディングの実現です。Vue をしばらく使用した後、いわゆるデータの双方向バインディングが、内部の唯一のアプリケーション シナリオであることがわかりました。コンポーネントはフォーム form (input、textarea、select、radio ) であり、このシナリオでのデータの双方向バインディングは、フレームワーク内に実装されていなくても、自分で実装するのが非常に簡単です。これを理解すると、React が双方向のデータ バインディングを実装していないと考えるのは甘いと感じます。

React データ転送には 2 つの側面が含まれます: コンポーネント内のデータ転送

1. フォームの双方向データ バインディングの実装方法とコンポーネント間のデータ転送

2. 。 子コンポーネントにデータを渡す親コンポーネント、親コンポーネントにデータを渡す子コンポーネント、兄弟コンポーネント間でのデータの受け渡しが含まれます。

この記事では、まずコンポーネント内のデータ転送について説明します。

2. コンポーネント内の内部データ転送

React コンポーネントの内部通信は、主にデータ表示とイベント処理の 2 つの部分に分かれています。

2.1 データ表示

コンポーネントの内部データの表示と更新は状態を通じて実装されます。状態を使用する場合は、ES6 クラスを使用してコンポーネントを定義する必要があります。データの更新については、双方向データ バインディングのセクションで説明します。このセクションでは、初期化されたデータの表示についてのみ説明します。

Vue に詳しい方ならわかると思いますが、React の state オブジェクトは Vue の data オブジェクトと同等です

以下は純粋にデータを表示する例です:

class App extends Component {
 constructor(props) {
 super(props);

 // 初始化 state
 this.state = {
  inputValue: "test",
 };
 }

 render() {
 // 注意，在 react 中，DOM 元素是对象，所以使用‘()'包住 
 return (
  <p className="App">
  <p>{this.state.inputValue}</p>
  </p>
 );
 }
}

クラスで定義された React コンポーネントでは、ライフサイクルフック関数に加えて、 constructor() と render() の 2 つのメソッドも自動的に実行されます。Constructor() が最初に実行され、constructor() の実行中に、DOM をレンダリングするための render() 用のデータが準備されます。

実際、constructor() 関数は、コンポーネントのライフサイクルで呼び出される最初の関数です。

2.2 イベント

2.2.1 DOM のイベントとの類似点と相違点

React でのイベントの処理は DOM でのイベントの処理と似ていますが、2 つの違いがあります:

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 落とし穴

関数をイベントとして直接渡すハンドラーは関数の実行環境を指定する必要があります。つまり、これを手動でバインドする必要があります。そうしないと、これが未定義であるというエラーが報告されます。以下の例を参照してください:

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 (
  <p className="App">
  <button onClick={this.handleClick}>
   {this.state.isToggleOn ? "on" : "off"}
  </button>
  </p>
 );
 }
}

2.2.3 なぜ落とし穴があるのですか?

React の公式 Web サイトには、この問題には JS ネイティブ構文が必要であると記載されていますが、React は JS の場合にそのようなイベント システムを設計しているとは限りません。構文はすでに決まっています。誰かが立ち上がって責任を負わなければならない場合は、五分五分で引き受けさせてください。

1、JSネイティブ構文の問題

JS構文には次のようなルールがあります: 関数の関数本体(()なし)が別の変数に代入される場合、関数本体内のthisポインタは変更される可能性があります。変化するかどうかは、関数と代入した変数が同じスコープ（同じ実行環境）にあるかどうかによりますが、実際に使用する場合は同じスコープ内の変数に関数を代入する意味はありません。その関数を直接指定するのは問題ありません。別の変数に代入する必要はありません。

このポインタは変更されません。意味のない例 (説明の便宜上、var 演算子を直接使用します):

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

var a = fn;

fn(); // window
a(); // window
this 指向发生改变的例子：

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

// 将函数体赋值给一个对象的属性，函数执行时 this 和定义时指向不同
var o = {
 a: fn,
};

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

関数本体を別の変数に代入し、元の関数の this ポイントもそれに代入する場合。 、次のように、代入プロセス中にこれをバインドする必要があります:

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

// fn 在赋值的同时将内部的 this 打包一块赋值给了 a
var o = {
 a: fn.bind(this),
};

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

通常、関数本体を変数に代入するときにこのエラーを回避するために、バインディング実行環境操作が実行されます。典型的な例は var bindingId = 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',
 },
};

と同等です。これは、実際に関数本体をオブジェクトのプロパティに割り当てます。これは、関数の実行時と関数の定義時に異なるシナリオを指します。このポインターはネイティブ構文と同じです。違いは、ネイティブ JS ではとにかくポインタが常に存在するのに対し、JSX は直接未定義であることです。

したがって、これをバインドせず、未定義を報告するというエラーを完全に JS ネイティブ構文のせいにすることはできません。

3. 双向数据绑定

通过 state 传递数据加上事件处理程序便能实现数据的双向绑定，其背后的思想是（以 input 为例）：初始化时将 state 中预定义的 state a 赋值给 input，当 input 的 value 发生改变时，触发事件处理程序，将改变后的 value 赋值给状态 a ，React 监测到 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 改变时触发 changeInput
  return (
   <p className="App">
    <input value={this.state.inputValue} onChange={this.changeInput} />
    <p>{this.state.inputValue}</p>
   </p>
  );
 }
}

这里用到了事件对象，React 的事件对象和 JS 原生事件对象保持一致。

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

使用Node.js爬虫如何实现网页请求

使用VueAwesomeSwiper容易出现的问题？

在angular2中有关Http请求原理（详细教程）

在node中如何实现http小爬虫

以上がReact でコンポーネントの内部通信を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。