JSX条件渲染及列表

条件渲染

参考

  1. // if条件
  2. const renderBtn = loading => {
  3.       if(loading) {
  4.         return <LoadingButton />
  5.     }
  7.     return <Button />
  8. }
  10. // 逻辑操作符
  11. render() {
  12.       return (
  13.         <div>
  14.             { loading ? <LoadingButton /> : <Button /> }
  15.           </div>
  16.     );
  17. }

列表渲染

参考

  1. // js
  2. const numbers = [1, 2, 3, 4, 5];
  3. const doubled = numbers.map(number => number * 2);
  4. console.log(doubled);
  6. // jsx
  7. const numbers = [1, 2, 3, 4, 5];
  8. const listItems = numbers.map(number =>
  9.   <li>{number}</li>
  10. );
  12. // render
  13. ReactDOM.render(
  14.   <ul>{listItems}</ul>,
  15.   document.getElementById('root')
  16. );
  18. // output
  19. <ul>
  20.     <li>1</li>
  21.       <li>2</li>
  22.       <li>3</li>
  23.       <li>4</li>
  24.       <li>5</li>
  25. </ul>
key

列表渲染需为每一个子项提供特殊key属性，表明该子项是唯一的，便于react判断子项是否有变化。

key的值应该是稳定的、相对兄弟节点唯一的。

参考: 为什么key是必要的

  1. const numbers = [1, 2, 3, 4, 5];
  2. const listItems = numbers.map((number) =>
  3.   <li key={number.toString()}>
  4.     {number}
  5.   </li>
  6. );
  8. // 用属性id值作Key
  9. const todoItems = todos.map((todo) =>
  10.   <li key={todo.id}>
  11.     {todo.text}
  12.   </li>
  13. );
  15. // 如果该列表不会排序的话，可用index作key
  16. const todoItems = todos.map((todo, index) =>
  17.   // Only do this if items have no stable IDs
  18.   <li key={index}>
  19.     {todo.text}
  20.   </li>
  21. );

受控组件与非受控组件

受控组件: form表单的数据交由react处理。可以与其他组件共用表单数据以及将数据交由store统一状态管理。

非受控组件: form表单的数据交由dom自己处理。传统的操作真实dom获取数据，类似jQuery

大多数情况下，推荐使用受控组件

比较:

controlled-and-uncontrolled

  1. 受控组件: LearnReact/lesson-3/lesson/src/form/controlled.js
  2. 多个受控组件: LearnReact/lesson-3/lesson/src/form/multiControlled.js
  3. 非受控组件: LearnReact/lesson-3/lesson/src/form/uncontrolled.js

状态提升

很多时候，你需要多个组件共用同一个数据, 这个时候，推荐将这个数据(state)提升到一个公共的祖先组件中。

  1. 代码: LearnReact/lesson-3/lesson/src/LiftStateUp

React理念

  1. 组件遵守单一职责原则: 一个组件只做一件事
  2. 单向数据流

参考

一个可搜索的table组件示例

thinking-in-react-mock

  1. 划分组件层级
  2. 构建静态版本
  3. 确定哪些是state数据
  4. 确定你的state应该放在哪个组件中
  5. 增加反向数据流