研究ノート-Reactの基本的な機能学習

現在、reactフレームワークはより一般的なフレームワークであり、主に大規模なプロジェクトで使用されています。reactフレームワークはvueフレームワークに似ています。以下は主に、以下のvue命令がreactでどのように実装されるかを学習します。

1.reactダウンロード：

コマンドウィンドウで、reactscaffoldパッケージをダウンロードします。

yarn global add create-react-app

2.プロジェクトを作成します。

コマンドウィンドウで、次のように入力して、reactプロジェクトを作成します。

create-react-app  项目名

3.プロジェクトを理解します。

webStorm、VS Code、またはHBuliderを使用してプロジェクトを開きます。あなたはそれらの中でいくつかのファイルを見ることができます

package.jsonには、プロジェクトの開始方法、パッケージ化方法、プロジェクトの依存パッケージなど、プロジェクトの基本的な構成が含まれています。

srcフォルダーは、コードを記述するための主要な場所です。srcでは、index.jsファイルがルートインスタンスであり、ルートコンポーネントAppがパブリックフォルダーのindex.htmlのマウントポイントにレンダリングされます。その内容は比較的固定されています。

// 使用jsx对象(例如：<App />)时，必须引入react
import React from 'react';
import ReactDOM from 'react-dom';
// 导入根组件
import App from './App.jsx';

// 第一个参数；要渲染什么。第二个参数：要渲染到哪里
ReactDOM.render( <App />, document.getElementById('root'));

srcフォルダー内のApp.jsxがルートコンポーネントです。ルートコンポーネントを定義するには、クラスコンポーネントと関数コンポーネントの2つの方法があります。

jsxオブジェクトとは何ですか？vueのテンプレートに関連しています。

reactコンポーネントはrender関数を指定する必要があり、レンダリング関数はjsxオブジェクトまたはnullを返す必要があります。

以下はクラスコンポーネントを使用しています。

// react组件的自定义就是要继承自React.Component的类
import React, { Component } from 'react';

class App extends Component {
    constructor() {
        super();                  // 可以使用父组件中的构造函数
        this.state = {            // 放需要渲染的数据
                            
        }
    }
    render() {                    // return中写html代码，返回jsx对象
        return {(                 // 写html代码时，可以用()包裹
            <div><div>            // 只有一个根节点
        )};
    }
}

srcフォルダーのApp.cssは、ルートコンポーネントのスタイルを変更するためのものですが、複数のcssフォルダーのクラス値が同じであると、レンダリングが混乱します。したがって、通常はApp.module.cssを使用して、必要な正確なスタイルを見つけます。

import style from './App.module.css';     // 导入样式文件

render() {
    return {
        <div className={style["container"]></div>
    };
}

4.基本的な機能の実現：

次の関数で使用されるデータは、コンストラクターのthis.stateから取得されます。この関数は、コンストラクターおよびレンダーと同じレベルのカスタム関数から取得されます。

1. vueのv-textコマンドと同様：

<span>{this.state.name}</span>

2. vueのv-if命令と同様：

<div>
    {this.state.isShow && (    // this.state.isShow为真时，显示后面的内容
        <div>显示内容</div>
    )}
</div>

3.vueのv-if + v-else命令と同様です。

<div>
    {this.state.isShow ? (
        <div>为真显示的内容</div>
    ) : (
        <div>为假显示的内容</div>
    )}
</div>

4.vueのv-if + v-else-if + v-else命令と同様：

この命令は関数を介して間接的に実装できますが、関数はjsxオブジェクトを返す必要があります。

// render()函数周围
judge() { return jsx对象 }
// render()函数returnjsx对象中
<div>
    {this.judge}
</div>

5. vueのv-for命令と同様：

<ul>
    {this.state.data.map((item,i) => (        // 简单类型的数组
        <li key={i}>{item}</li>
    ))}
</ul>

6. vueのv-showコマンドと同様です。

直接実現することはできません。クラス値を動的に変更することで実現できます。クラス値show：displayブロックをCSSに設定し、別のクラス値を非表示にします：display：none;クラスを前後に切り替えてv-showコマンドを実装します。

<span className={this.state.isShow ? style["show"] : style["hidden"]}>显示</span>

7. vueのv-bind命令と同様：

動的クラス値と静的クラス値の同時存在を実現することが可能です。

// 共有两种方式实现：
<span className={["aaa", this.state.isShow ? style["show"] : ""].join(" ")}>显示</span>

<span className={`aaa ${ this.state.isShow ? style["show"] : "" }`>显示</span>

8. vueのv-on命令と同様：

イベントをラベルにバインドします。on + event名を使用します。たとえば、click eventonClickなどです。

イベントバインディングはパラメータを渡しません（デフォルトではイベントオブジェクトe）：

<button onClick={this.clickHandler}>点我</button>

イベントバインディングパスパラメータ（矢印関数として記述）：

<button onClick={() => this.clickHandler2(100)}>点我</button>

イベントバインディングを使用する場合は、関数内でこのポインターを指すことにも注意する必要があります。reactイベントバインディング関数のthisポインターが現在のコンポーネント自体を指すようにする場合は、次の3つの方法があります。

1.現在のコンポーネントのコンストラクターでバインド呼び出しを行い、これをバインドします。

利点：関数が親コンポーネントから子コンポーネントに渡されるときに、親コンポーネントの関数を更新しても、子コンポーネントの関数が無意味に更新されることはありません。

短所：コンストラクターに追加のコードを記述する必要があります

constructor() {
    super();
    this.state = {};
    this.clickHandler = this.clickHandler.bind(this)
}

clickHandler() {}

<button onClick={this.clickHandler}></button>

2.関数をバインドするときは、このポインターをbindで直接バインドします。

利点：コンストラクターに追加のコードを記述する必要がありません。

短所：関数が親コンポーネントから子コンポーネントに渡されると、親コンポーネントの関数を更新すると、バインド式が実行され、前の関数と同じ新しい関数が生成されますが、子コンポーネントは次のように考えます。これは別の機能であり、結果としてサブコンポーネントが無意味に更新されます。

clickHandler() {}

<button onClick={this.clickHandler.bind(this)}></button>

3. ES6クラス定義の高度な機能を使用します。クラス定義が機能する場合は、矢印関数を使用してこれを現在のコンポーネントにバインドします。

clickHandler = () => {};

<button onClick={this.clickHandler}></button>

9.次の状態のデータを変更します。

状態のデータを変更するには、this.setState（）を使用する必要があります。

constructor() {
    super();
    this.state = {
        name: '张三',
        arr: [{id: 1, name: '张三'}, {id: 2, name: '李四'}],
        obj: { id: 3, name: '王五' }
    };
}

// 简单修改数据
this.setState({ name: '李四' });    // 运行后state中的name数据会发生改变'李四'
// 运行后state中obj中的值会变成'李四'
this.setState({ obj: Object.assign({}, this.state.obj, { name: '李四' }) })

// 操作arr
let arr = this.state.arr;
arr[0].name = "李四";
this.setState({ arr });
// 运行后，state中的arr的第一个对象中的name值为李四

This.setState（）は、オブジェクトまたは関数にすることができます。違いは次のとおりです。

オブジェクト（this.setState（{}））の場合、同じ同期コードで何度繰り返されても、最後の操作のみが実行されます。

オブジェクト（this.setState（state => {}））の場合、同じ同期コード内の後のsetStateのデータは、前のsetStateの結果を使用します。

this.state = {
    a: 0,
    b: 0
}

for(let i = 0; i < 100; i++) {
    this.setState({ a: this.state.a + 1 });
    this.setState(state => { a: state.a + 1 });
}

// 操作执行结束后,a: 1, b: 100

上記は、今日の反応フレームワークを学習した結果です。

研究ノート-Reactの基本的な機能学習

1.reactダウンロード：

2.プロジェクトを作成します。

3.プロジェクトを理解します。

4.基本的な機能の実現：

おすすめ