React を使用してアプリを構築するにはどうすればよいですか? React+Redux を使用して大規模アプリケーションを構築する手順の詳細

この記事では主にreact+reduxによる大規模アプリケーションの構築について紹介します。それでは、記事の内容を見ていきましょう

背景

私たちのチームは、開発に時間がかかり、フロントエンドとバックエンドの混合開発手法を使用しているプロジェクトを抱えており、メンテナンスコストが非常に高くなります。オンラインでは多くの問題が暴露されています。また、同社の 100 以上の製品ラインに接続されているため、毎日大量の顧客からの苦情や製品ラインに関するフィードバックの問題が寄せられています。 2017年11月にプロダクトを主体としてプロセスをプロダクトレベルから再設計し、プロジェクトのフロントエンドとバックエンドを再構築しました。この記事では、フロントエンドの責任者である私が、テクノロジーの選択から開発、立ち上げまでのプロセス全体における経験を共有します。

テクノロジーの選択について考える

まず、プロジェクトの次のページを見て、その特徴をいくつかまとめてみましょう。

私たちのページはほとんどがユーザーに入力を求めるフォームです。ページの読み込み時に大量のデータをリクエストしてレンダリングする必要はありません。さらに、ページには多くの状態を表示する必要があります (たとえば、上の 3 つの画像はプロジェクトのコンポーネントです)。最も重要なビジネス要件もあります。Baidu には多くの社内製品ラインがあり、さまざまなビジネスがいくつかの共通プロセスを通過することに加えて、製品の特性に対応するいくつかのプロセスも通過します。線。

これらのビジネス特性と、これまでの Nodejs と React での開発経験を組み合わせると、私の全体的なテクノロジー選択は FIS3+Nodejs+React+Redux+React-Router になります。では、これらのテクノロジーの選択は何をもたらすのでしょうか?

1. フロントエンドはブラウザ側でページジャンプのルーティングを制御できるため、フロントエンド開発の柔軟性が向上します

2. ページは、次のようにサービス内のテンプレートエンジンまたは同型レンダリングによってレンダリングできます。ビジネスニーズ; フロントエンドはエラーコードのコピーとページのコピーを統合的に管理し、Nodejs を使用してそれらをオフラインで「ホットアップデート」し、オンラインでリアルタイムに反映されます。・コンポーネント（複数ページ）データの共有が可能になり、さらに便利になりました。無意味なネットワークリクエストを削減します。プロジェクト運営の安定性と可用性を向上させます。

3. ここでエンジニアリングツールの選択について簡単に説明します。現在業界で最も人気のあるエンジニアリング ツールは Webpack です。ドキュメントを読む以外には、実際のアプリケーションの経験はあまりありません。

   私は、ツールを使用することは、開発プロセス中に頻繁に手動操作を必要とするいくつかの不快なタスクを開発者が解決するのに役立つと常に信じてきました
。 Webpack に関係なく、ツールを使用するだけでコードを手動でコンパイルし、手動でデプロイし、開発用のページを手動で更新できます。この一連のプロセスは一貫性があり、開発コストが削減されます。

4. 私は、会社関連のすべてのプロジェクトで、FIS3 が使いやすく、さまざまなエンジニアリングのニーズを満たすことができると考えています。私は Webpack に反対しているわけではありません。現在使用している FIS3 を放棄して Webpack を使用する理由が見つかりません。

古いフレームワークメカニズムと新しいフレームワークメカニズムの違いここでは、テクノロジーの選択を決定した後の、レンダリングページのレンダリングメカニズムのいくつかの違いを簡単に紹介します。

私たちのページは最初の画面にあるときは大量のデータをロードする必要がないため、ほとんどのページは依然としてブラウザー側でレンダリングされます。

React がフロントエンドにもたらす利便性

<Route path="/v4/appeal/fillname" component={FillName} />
{* 这里对某些组件做异步加载 *}
<Route
    path="/v4/appeal/selectuser"
    getComponent={selectUser()}
/>function selectUser() {
    return (location, cb) => {            require([&#39;../accountselect/container/AccountSelect&#39;], function (component) {
                cb(null, component);
            });
        };
    }

React-Router を介したルーティング制御のためのフロントエンド コードに加えて、サーバーでもいくつかの設定を行う必要がある場合があります。そうしないと、ページがロールバックされたときに問題が発生します (ページがルートを見つけられません)。実際には、通常アクションと呼ばれるルーティングを制御するためのものです。私はNodejsを使用しているため、私の構成は次のとおりです。

router.get('/fillname', router.action('index'));
router.get('/selectuser', router.action('index'));

イベント

オープンソース プロトコルの問題のため、フロントエンド イベントでは一時的に Preact を使用しました。 React と Preact の最大の違いは、一部のイベントのカプセル化です。これらにより、Preact は React よりもはるかに小さくなります。
モバイル開発を行う場合、フロントエンドがよく直面する問題は、click イベント click事件 300ms 延时的问题。在React中提供的onClick事件同样也会出现这样的问题。如果如果我们想要在点击一个按钮之后，在其它地方立即出现反馈，最好就是使用onTouchEnd事件，或者就是使用开源的Npm包react-fastclick能很好的解决click事件 300ms延时的问题。

使用的方法就是在我们代码的入口地方，声明以下语句，他默认会改变react的onClick事件的行为

import initReactFastclick from 'react-fastclick';

initReactFastclick();

组件的设计

在使用React的时候可能都会面临的问题，我的组件应该是无状态的还是有状态的。我的组件状态怎么共享。什么时候我应该使用Redux来管理组件的状态。刚开始接触react都会有这样的疑问吧。

一种比较极端的做法就是，不管状态需不需要共享，组件的所有状态都试用Redux来管理。这样的做法就是我们需要写大量的Action。如果是一两个页面还好，如果是十几个页面，真的写action是能把人写崩溃的。

那么最佳实践是什么呢？看下图

当我们要写一个组件的时候，首先想下这个组件是不是需要与其它组件共享它本身的状态。如果需要我们应该把它当做有状态的组件来设计，而且共享的状态使用Redux来管理。如果简单的就是无状态组件或者是这个组件本身的状态改变不会影响其它的组件，就可以将组件设计为无状态组件（虽然叫无状态组件，其实组件本身的状态也是可以使用this.state来管理的）。

组件的复用关系

React的一大热点就是组件化的开发思想。小到页面上的一个按钮都是可以设计成一个组件。既然是组件我们首先就应该考虑这个组件怎么被其它组件复用。（想看更多就到PHP中文网React参考手册栏目中学习）

举个简单的例子，在整个项目中都会用到的弹窗组件：

class AlertForm extends Component {
    constructor(props) {
        super(props);        this.state = {
            showlayout: false,  // false 以tip的方式提示错误， true以弹层的方式提示错误
            btnlist: false,
            formbtn: false
        };
    }
    componentWillReceiveProps(nextProps) {
    }
    handleHideLayout = () => {
    }
    handleMobile = () => {
    }
    handleChangeCheck = () => {
        history.go(-1);
    }
    render() {        return (            <p className="component-alertform" style={this.
    state.showlayout ? {display: &#39;block&#39;} : {display: &#39;none&#39;}}>
            </p>
        );
    }
}
export default AlertForm;

我们将这种可能在其他页面都用的组件单独抽象成出来，在需要用的地方import300ms

300ms

使用される方法は、コードのエントリポイントで次のステートメントを宣言することです。これにより、デフォルトで反応の onClick イベントの動作が変更されます

import AlertForm from &#39;../../components/AlertForm&#39;;<AlertForm    errno={errno}
    stateObj={fillAppealName}
    actions={actions}/>

を使用するときにこれに直面する可能性があります。質問への反応、コンポーネントはステートレスかステートフルか。コンポーネントの状態を共有する方法。コンポーネントの状態を管理するために Redux を使用する必要があるのはどのような場合ですか。初めてreactに触れるときは、このような疑問を抱くかもしれません。

より極端なアプローチは、状態を共有する必要があるかどうかに関係なく、Redux を使用してコンポーネントのすべての状態を管理することです。このアプローチは、多くのアクションを記述する必要があることを意味します。 1 ～ 2 ページなら問題ありませんが、数十ページ以上になると、実際にアクションを書くとクラッシュする可能性があります。

それでは、ベストプラクティスは何でしょうか?下の写真を見てください

コンポーネントを作成するときは、まず、このコンポーネントが自身の状態を他のコンポーネントと共有する必要があるかどうかを考えます。必要に応じて、ステートフル コンポーネントとして設計する必要があり、共有状態は Redux を使用して管理されます。単にステートレス コンポーネントである場合、またはコンポーネント自体の状態変化が他のコンポーネントに影響を与えない場合、コンポーネントはステートレス コンポーネントとして設計できます (ステートレス コンポーネントと呼ばれていますが、実際にはコンポーネント自体の状態も影響を与えることはありません)。 this .state を使用して管理することで変更できます)。

React のホットスポットの 1 つは、コンポーネントベースの開発アイデアです。ページ上のボタンのような小さなものをコンポーネントとしてデザインできます。これはコンポーネントであるため、このコンポーネントを他のコンポーネントがどのように再利用できるかを最初に検討する必要があります。 (さらに詳しく知りたい場合は、PHP 中国語 Web サイト React リファレンス マニュアル にアクセスして学習してください) )

以上がReact を使用してアプリを構築するにはどうすればよいですか? React+Redux を使用して大規模アプリケーションを構築する手順の詳細の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。