React高度なドキュメントを再読するチュートリアル1

JSX

JSXはXSSインジェクション攻撃を防ぐことができます。
レンダリングする前に、React DOMはJSXですべての値をフォーマットし、ユーザーがアプリケーションの外部にコードを挿入できないようにします。レンダリングする前に、すべてのデータは文字列処理にエスケープされます。

要素のレンダリング

レンダリングされた要素を更新する

React要素は変更できません。要素を作成すると、その子要素や属性を変更できなくなります。UIを更新する唯一の方法は、新しい要素を作成してReactDOM.render（）メソッドに渡すことです。ただし、大きなほとんどの場合、renderメソッドは一度だけ呼び出されます

コンポーネントと属性

部品

コンポーネントは、機能コンポーネントとクラスコンポーネントに分かれています。Functional
：

function Welcome(props) {
    
    
  return <h1>Hello, {
    
    props.name}</h1>;
}

ES6クラス：

class Welcome extends React.Component {
    
    
  render() {
    
    
    return <h1>Hello, {
    
    this.props.name}</h1>;
  }
}

プロパティ、小道具は読み取り専用です

プロップは読み取り専用です。関数またはクラスメソッドでコンポーネントを宣言しても、それ自体のプロップを変更することはできません。
入力を変更しない関数は、純粋な関数と呼ばれます
。Reactコンポーネントは純粋な関数である必要があり、独自のプロパティを変更することはできません

状態状態

状態はsetState()メソッドによってのみ設定でき、割り当て可能な唯一のthis.state場所はコンストラクタです。
状態の更新は非同期であり、一方の値に依存して他方を更新することはできません。コールバック関数で次の処理を実行できます

状態は常に特定のコンポーネントによって所有され、その状態から派生したデータまたはUIはツリーの下のコンポーネントにのみ影響します

イベント処理

キャメルケースの名前付け、関数をイベントハンドラーとして渡す
jsコードでは、イベントハンドラー関数はfalseを返してデフォルトのイベントを防止しますが、Reactではe.preventDefault()デフォルトのイベントを防止するために手動で呼び出す必要があります

Reactを使用する場合、通常、呼び出しaddEventListenerてDOM要素にイベントリスナーを追加する必要はありません。代わりに、要素が最初にレンダリングされるときにリスナーを提供します。

イベントハンドラーを呼び出すとき、これが現在のコンポーネントを指していることを確認してください。これをバインドするには、次のメソッドを使用できます。

bind绑定this.handleClick（）= this.handleClick.bind（this）
関数onClick =（（e）=> this.handleClick（e））を呼び出すときに矢印関数を使用します
関数はfunc =（）=>（）を直接使用します

なぜ反応バインドのイベント処理がこれをバインドするのですか？

私はこの問題をこれまで詳しく研究したことがなく、この問題を読み直した後、注意深く研究しました。
通常のjs関数のこの点は、関数を呼び出すオブジェクトであり、それが誰に近いかを
指します。非厳密モードでは、これはデフォルトで指しますグローバルオブジェクトウィンドウの
厳密モードでは、これは未定義です

アロー関数は、定義時にこれの方向をすでに決定しており、誰がそれを呼び出すかによって変化しません。

これに基づいて、なぜ直接反応しonClick={this.handleClick}ないのですか？
基本的な理由は、仮想dom domでの反応です。JSXはReact.createElement(component, props, ...children)、実際にはイベント関数コードを呼び出すときの構文上の砂糖です。

render(){
    
    
    return (<a href="#" onClick={
    
    this.handleClick}>click me </a>
})

解析される

render(){
    
    
   return React.createElement(
    "a", 
    {
    
     onClick: this.handleClick}, 
    "click me"
    );
   }

このようなコードでonClick = {function}は、onClickそれ自体が「中間変数」でありthis.handleClick、コールバックとして別の関数に渡されますが、これは現時点では失われます。簡単な例を挙げてください

class Cat {
    
    
 sayThis () {
    
    
    console.log(this); 
  }

 exec (cb) {
    
    
    cb();
  }

 render () {
    
    
    this.exec(this.sayThis);
  }
}
const cat = new Cat();
cat.render();

sayThisがコールバック関数としてexecにパラメーターとして渡された場合、これは失われている
ため、reactのイベント処理でこれをバインドする必要があります

リファレンス1
リファレンス2

形

制御コンポーネント

vueを使用したことがある人は、vueが双方向バインディングデータフローであることを知っています。フォームのデータ要素はv-modelによってのみバインドできます
が、反応は一方向データフローです。フォームの入力ボックスをバインドする場合は、状態は制御されたコンポーネントによって実行されなければなりません
handleChange(event) { this.setState({value: event.target.value}); }
<input type="text" value={this.state.value} onChange={(e) => this.handleChange(e)} />

フォームのonChange処理関数を使用して、入力データを更新します。この関数では、reactの設計思想に沿った特別な処理を実行して、ユーザーに自由度を与えることができます。

やっと

コードを読み取ることは、コードを書くことよりもはるかに重要であることを忘れないでください。大規模なコンポーネントライブラリを作成する場合、モジュール性、明確な構造、再利用可能なコードに感謝し、コード行は徐々に減少します。