React 组件 (Native Chinese option)

商品列表页开发实践

图像

利用数据。

const productList = [
  {id: 'E01', title: '商品1', inStock: false},
  {id: 'E02', title: '商品2', inStock: true},
  {id: 'E03', title: '商品3', inStock: false}
]

地图的使用

{productList.map(product => {
  const {id, title, inStock} = product
  return (
    <div key={id} className='list-item'>
      <strong>{title}</strong>
      &nbsp;
      {inStock ? <span style={{color: 'green', marginLeft: '20px'}}>在庫あり</span> : <span style={{color: 'gray', marginLeft: '20px'}}>在庫なし</span>}
      &nbsp;
      <button onClick={() => {edit(id)}} style={{border: '1px solid #00000', marginLeft: '20px'}}>商品編集</button>
    </div>
  )
})}

组件的分离

React 中的一切都是组件。

React应用由组件构成。组件是用户界面（UI）的一部分，具有自己的逻辑和外观。组件可以小如一个按钮，也可以大如整个页面。

• React では UI をコンポーネントで構築します。

• コンポーネントの分割は、特に大規模なソフトウェアにとってコードの組織化と保守性に役立ちます。

• JSX では、コンポーネントのタグは大文字で始める必要があります。

React16以降、Reactは関数コンポーネントの使用を公式に推奨しています。

组件的好处

• UI の構造を整理するためにコンポーネントをネストさせることは、HTML と同様、学習コストが低い

• コンポーネントの分割は、コードのメンテナンスと複数人での共同開発を容易にする。

共通コンポーネント（またはサードパーティー製コンポーネント）の封装により、コードの再利用が可能で、開発効率が向上する