コンポーネントが視覚的なものであることは何でしたか?

コンポーネントが実際にビジュアルコンポーネントであるとき、私は本当に好きです.
ライクthe JSX specification 図示

// Using JSX to express UI components.
var dropdown =
  <Dropdown>
    A dropdown list
    <Menu>
      <MenuItem>Do Something</MenuItem>
      <MenuItem>Do Something Fun!</MenuItem>
      <MenuItem>Do Something Else</MenuItem>
    </Menu>
  </Dropdown>;

render(dropdown);

ブラウザでページを見て、コードに入って、ブラウザで見たものをマークアップの構造に合わせて直感的にパターンマッチングできます.でも今は…私は、私が私の私の点を見つけることができる前に、私がますますマークアップ/JSXを実際に認知的に「解析する」ことをますます持っているとわかります.( Don't Make Me Think エンドユーザーだけでなく、開発者にも適用されます.JSXのように身近な技術が一般に勝っているのはそういうわけです)
私は、レンダリングにすべての種類の論理コンポーネントを置くことがコンポーネントのオリジナルの考えを乱用していると感じます.
オリジナルの考えは以下の通りでした.

"React Component: A highly cohesive building block for UIs loosely coupled with other components." as Pete Hunt defined it when introducing React in 2013

私は、構成要素をUI構造と振る舞いをカプセル化していると思っています、そして、スタイリング(理想的に、あまりにも)、単一の統一している懸念に基づきます.
そして、コンポーネントはHTML要素と同様にJSXタグで示されることになっていました(JSX仕様から上記の例のように).
しかし、私はより頻繁にコンポーネント(そして/または、彼らの構文)の乱用を見ます.以下の例のいずれかは、上記のコンポーネントのオリジナルの定義に対応しますか?

<Provider> and <Query> コンポーネントアポロクライアントです.

<Router> and <Route> 反応ルータの構成要素

<For> コンポーネントSolidJS , react-loops , react-for and react-listable , jsx-control-statements , and react-condition ...

<Show> コンポーネントSolidJS . if文の基本的な(反応性)再実装.

<Suspense> SolidjsとReactJSのコンポーネント.また、基本的にif文の再実装を行います.

<ErrorBoundary> 反応とsolidjsのコンポーネント.

基本的に同じビジュアルコンポーネントの複数のバージョン<ChartContainer> and <UnconditionalChartContainer> . レンダリングマークアップに実装の詳細を漏らす.

それは私を悲しくさせる.

そして、「サーバーコンポーネント」、「クライアントコンポーネント」と「共有コンポーネント」を考慮すると、コンポーネントを見るとき、私は、それがどこでレンダリングされるかについてさえ知らなければなりません.(適切にシリアル化されているかどうかについては触れないでください.サーバコンポーネントに渡すことができなかったクライアントコンポーネントでした.しかし、少なくともクライアントとサーバーのコンポーネントは、レンダリングとは何かを持っているだけでなく、ロジックをマークアップとしてポーズ.

何が起こったのでしょうか

"any time your data changes, just blow away your view, and re-render it from scratch, that would be so much easier. It would make the structure and amount of code in your app so much simpler ... describe what your view looks like, and then never worry about updating it" - Tom Occhino introducing React in 2013.

しかし、我々はますます、どのように、いつ、どこでビューが更新されるか心配する必要があります.(たとえばサスペンス/コンカレントモード、サーバ/クライアント).眺めをちらっと見て、何が何であるかについての単純で、簡単で、直観的な理解を得ている日.
何が起こったのでしょうか

"Only put display logic in your components. I'm not advocating putting all of your model validation code, and fetching, and data access, in components. You might put them into some third party libraries that has some sort of bridge to your components.", as Pete Hunt mentioned when introducing React in 2013. (Did he just not make a strong enough point, so it was forgotten?)

“反応あなたのUIとイベントに応答する”how it was introduced . ではなく、“反応は、宣言のマークアップの階層内のすべてのロジックを変換し、実行する方法です”として多くの場合に展開している.「DOMに自分自身をレンダリングする再利用可能なコンポーネントを構築することはすべてです.」Pete said . は<For> または<Provider> コンポーネントを行う?
現在のドキュメントでもそうです.

Components let you split the UI into independent, reusable pieces, and think about each piece in isolation. ... Conceptually, components are like JavaScript functions. They accept arbitrary inputs (called “props”) and return React elements describing what should appear on the screen. https://reactjs.org/docs/components-and-props.html

私は、2、3年の人々が「コンポーネント」が洗礼を受けた概念になっているのを理解して、彼らの古いコードベースを解読しようとしている間、考え始めると感じます

What the hell were we thinking, mixing all of these things together into one big pile of tightly coupled concerns? And to put them all into the 'view' of all things??

特定のライブラリを選択しないsemantic shift 他の反応とほぼ同じようになってきましたが、いくつかの反応関連ライブラリがどのようにコンポーネントを定義しているのでしょうか

SolidJS Component: "All a component is, is a factory function that generates DOM nodes that are tied to state through function closures of effectful functions.", from SolidJS: Reactivity to Rendering

React Loops Component: "React Loops follows React's model of components as encapsulation of behavior and state.", from react-loops docs

現在、反応の元の定義と比較してください.

"React Component: A highly cohesive building block for UIs loosely coupled with other components." as Pete Hunt defined it when introducing React in 2013

今、反応とsolidjsがレンダリングする方法に微妙であるが、重要な違いがあります.
しかし、少なくとも私たちは

名前と同じもの、別のものは違う?

別のものを別に見えるか?(同じようなJSXタグを使用していません.

我々は、構造(HTML)、スタイル(CSS)と行動(JS)に基づいてビューを分離から離れて移動しました-それは良い動きだった.コンポーネントは、より良い、より一貫したカプセル化とUIビルディングブロックの抽象化です.しかし、我々は道の反対側の溝の上に着陸しました:コンポーネントとして同じJSX表示構造にあらゆる種類の行動を入れて.
あなたが人々に強力な道具を与え、明確な方向性のない自由を与えるなら、彼らはそれを虐待するでしょう.すべてがうまく宣言的なコンポーネントを作ることができるとき、すべては典型的に1になります.
しかし、あらゆるステップで、私たちは徐々にJSXのHTMLに精通しています.それは間違いなく、それが作られた理由の一つであり、少なくともJSXがどのように理解されているのか[2] [3] [4] ).
任意のコードベースにジャンプしたり、すぐにマークアップで何をするかを知るには、このように不必要に直感的になります.
私たちは少しだけ関心を分離し始めることができますか?
どうぞ?
理想的に視覚的なもののためのコンポーネントを保持する.しかし、可能でない場合は、少なくともこれらの論理的なコンポーネントをアプリケーションの一部(最大のapp . js、またはダウンローカライズされたラッパーのコンポーネント)にストローしていない場合は、それ以外の場合はうまくいけないコンポーネントのビューをきれいにゴミをしないでください.