我们掌握了react的基本语法,我们尝试实现一个todos的案例.

素材

image.png

功能实现

修改解构

  • 需要动态渲染的内容复制到JSX中
  • 修改JSX中的注释为 {/* */} 形式
  • 修改原生HTML属性为驼峰类型

    开发顺序

  1. 实现新增
  2. 实现列表展示
  3. 实现是否完成状态切换
  4. 实现item left
  5. 全选/取消全选
    1. 注意setState异步问题
  6. 双击编辑
    1. 注意取消还原的问题
  7. 删除
  8. 状态过滤
  9. 清除完成

b.gif
代码部分:

  1. class Todos extends React.Component {
  2.   constructor(props){
  3.     super(props);
  4.     this.state = {
  5.       newTodoValue : '', 
  6.       todoList: [],
  7.       itemLeft: 0 , // 未完成剩余数量
  8.       allCheckState: false, // 全选状态
  9.       preEditValue: '',// 备份编辑前的内容
  10.       fitlerState: 'all', //all, active, completed
  11.     }
  12.     this.handleNewTodo = this.handleNewTodo.bind(this);
  13.     this.handleNewTodoEnter = this.handleNewTodoEnter.bind(this);
  14.     this.regetItemLeft = this.regetItemLeft.bind(this);
  15.     this.handleCheckAll = this.handleCheckAll.bind(this);
  16.     this.handleClearCompleted = this.handleClearCompleted.bind(this);
  17.   }
  18.   // 处理新增表单value
  19.   handleNewTodo(e){
  20.     this.setState({
  21.       newTodoValue: e.target.value
  22.     })
  23.   }
  24.   // 处理新增事件
  25.   handleNewTodoEnter(e){
  26.     // 内容为空 不处理
  27.     if(!e.target.value) return;
  28.     if(e.keyCode === 13){
  29.       // 复制todoList临时变量
  30.       var todoList = [...this.state.todoList];
  31.       // 构建todo对象
  32.       var todo = {
  33.         id: new Date().getTime(),
  34.         isEdit: false,
  35.         text: e.target.value,
  36.         isDone: false,
  37.       }
  38.       todoList.push(todo);
  39.       //更新到todoLis
  40.       this.setState({
  41.         todoList
  42.       });
  43.       // 重新计算剩余数量
  44.       this.regetItemLeft();
  45.       // 清除新增输入框内容
  46.       this.setState({
  47.         newTodoValue: ''
  48.       })
  49.     }
  50.     // esc 取消
  51.     if(e.keyCode === 27){
  52.       this.setState({
  53.         newTodoValue: ''
  54.       })
  55.     }
  56.   }
  57.   // 处理全选
  58.   handleCheckAll(){
  59.     if(this.state.todoList.length == 0) return;
  60.     // 注意: setState是异步的,必须在第二个回调才能获取最新状态
  61.     // # https://react.docschina.org/docs/state-and-lifecycle.html
  62.     this.setState(state=>({
  63.       allCheckState: !state.allCheckState
  64.     }),()=>{
  65.       // 更改每一项
  66.       var todoList = [...this.state.todoList];
  67.       todoList.map(item=>{
  68.         item.isDone = this.state.allCheckState;
  69.         return item;
  70.       })
  71.       console.log('todoList',todoList)
  72.       // 
  73.       this.setState(state=>({
  74.         todoList
  75.       }))
  76.       // // 更新剩余数量
  77.       this.regetItemLeft();
  78.     })
  79.   }
  80.   // 某一行的checkbox被修改
  81.   handleCheckOne(id,e){
  82.     var todoList = [...this.state.todoList];
  83.     // 找到目标元素下标
  84.     var index = todoList.findIndex(item=>item.id == id);
  85.     todoList[index].isDone = !todoList[index].isDone;
  86.     // 更新
  87.     this.setState({
  88.       todoList
  89.     })
  90.     // 计算剩余未完成数量
  91.     this.regetItemLeft();
  92.   }
  93.   // 编辑行数据变化
  94.   handleEditChange(id,e){
  95.     var todoList = [...this.state.todoList];
  96.     var index = todoList.findIndex(item=>item.id == id);
  97.     todoList[index].text = e.target.value;
  98.     this.setState({
  99.       todoList
  100.     })
  101.   }
  102.   //双击编辑
  103.   handleEdit(id,e){
  104.     var todoList = [...this.state.todoList];
  105.     // 排他 只能有一个处于编辑状态
  106.     var beforeEditIndex = todoList.findIndex(item=>item.isEdit);
  107.     if(beforeEditIndex>-1){
  108.       todoList[beforeEditIndex].isEdit = false;
  109.     }
  110.     // 找到目标元素下标
  111.     var index = todoList.findIndex(item=>item.id == id);
  112.     todoList[index].isEdit = true;
  113.     this.setState({
  114.       todoList
  115.     },()=>{
  116.       // 通过dom关系找到目标元素
  117.       e.target.parentNode.nextElementSibling.focus();
  118.     })
  119.     // 备份旧内容 用于esc取消还原
  120.     this.setState({
  121.       preEditValue: todoList[index].text
  122.     })
  124.   }
  125.   // 编辑行确定
  126.   handleOkOrCancel(id,e){
  127.     var todoList = [...this.state.todoList];
  128.     // 找到目标元素下标
  129.     var index = todoList.findIndex(item=>item.id == id);
  130.     // 确定是esc还是enter
  131.     if(e.keyCode === 13){
  132.       todoList[index].isEdit = false;
  133.       this.setState({
  134.         todoList,
  135.         preEditValue: ''
  136.       })
  137.     }else if(e.keyCode === 27){
  138.       // 还原
  139.       todoList[index].text = this.state.preEditValue;
  140.       todoList[index].isEdit = false;
  141.       this.setState({
  142.         todoList,
  143.         preEditValue: ''
  144.       })
  145.     }
  146.   }
  147.   // 计算剩余
  148.   regetItemLeft(){
  149.     // 如果没有数据
  150.     if(this.state.todoList.length == 0){
  151.       // 处理全选
  152.       this.setState({
  153.         allCheckState: false
  154.       })
  155.       return;
  156.     }
  157.     // 设置剩余长度
  158.     var itemLefts = this.state.todoList.filter(item=>!item.isDone);
  159.     this.setState({
  160.       itemLeft: itemLefts.length
  161.     })
  162.     // 响应全选
  163.     this.setState({
  164.       allCheckState: itemLefts.length==0
  165.     })
  166.   }
  167.   // 删除
  168.   removeItem(id){
  169.     var todoList = [...this.state.todoList];
  170.     // 找到目标元素下标
  171.     var index = todoList.findIndex(item=>item.id == id);
  172.     todoList.splice(index,1);
  173.     this.setState({
  174.       todoList
  175.     })
  176.   }
  177.   // 改变filterState
  178.   changeFilterState(state){
  179.     this.setState({
  180.       fitlerState: state
  181.     })
  182.   }
  183.   // 清除所有完成的
  184.   handleClearCompleted(){
  185.     var todoList = [...this.state.todoList];
  186.     todoList = todoList.filter(item=>!item.isDone);
  187.     this.setState({
  188.       todoList
  189.     })
  190.   }
  191.   render() {
  192.     return (
  193.       <section className="todoapp">
  194.         <header className="header">
  195.           <h1>todos</h1>
  196.           <input
  197.             className="new-todo"
  198.             placeholder="What needs to be done?"
  199.             autoFocus
  200.             value = {this.state.newTodoValue}
  201.             onChange = {this.handleNewTodo}
  202.             onKeyUp= {this.handleNewTodoEnter}
  203.             />
  204.         </header>
  205.         {/* This section should be hidden by default and shown when there are todos */}
  206.         <section className="main">
  207.           <input id="toggle-all" className="toggle-all" type="checkbox" checked={this.state.allCheckState} onChange={this.handleCheckAll}/>
  208.           <label htmlFor="toggle-all">Mark all as complete</label>
  209.           <ul className="todo-list">
  210.             {/* These are here just to show the structure of the list items */}
  211.             {/* List items should get the class `editing` when editing and `completed` when marked as completed */}
  212.             {
  213.               this.state.todoList.map(item=>{
  214.                 // 待办
  215.                 if(this.state.fitlerState == 'active'){
  216.                   if(item.isDone) return null;
  217.                 }
  218.                 // 已完成
  219.                 if(this.state.fitlerState == 'completed'){
  220.                   if(!item.isDone) return null;
  221.                 } 
  222.                 return(
  223.                   <li className={item.isDone?'completed':''} onDoubleClick={e=>this.handleEdit(item.id,e)} key={item.id}>
  224.                     <div className="view" style={{display: item.isEdit?'none':'block'}}>
  225.                       <input className="toggle" type="checkbox" checked={item.isDone} onChange={e=>this.handleCheckOne(item.id,e)}/>
  226.                       <label>{item.text}</label>
  227.                       <button className="destroy" onClick={e=>this.removeItem(item.id)}></button>
  228.                     </div>
  229.                     <input className="edit" onKeyUp={e=>this.handleOkOrCancel(item.id,e)}  style={{display: !item.isEdit?'none':'block'}} value={item.text} onChange={e=>this.handleEditChange(item.id,e)}  />
  230.                   </li>
  231.                 )
  232.               })
  233.             }
  234.           </ul>
  235.         </section>
  236.         {/* This footer should be hidden by default and shown when there are todos */}
  237.         <footer className="footer">
  238.           {/* This should be `0 items left` by default */}
  239.           <span className="todo-count">
  240.             <strong>{this.state.itemLeft}</strong> item left
  241.           </span>
  242.           {/* Remove this if you don't implement routing */}
  243.           <ul className="filters">
  244.             <li onClick={e=>this.changeFilterState('all')}>
  245.               <a className={this.state.fitlerState=='all'?'selected':''} href="#/">
  246.                 All
  247.               </a>
  248.             </li>
  249.             <li onClick={e=>this.changeFilterState('active')}>
  250.               <a className={this.state.fitlerState=='active'?'selected':''} href="#/active">Active</a>
  251.             </li>
  252.             <li onClick={e=>this.changeFilterState('completed')}>
  253.               <a className={this.state.fitlerState=='completed'?'selected':''} href="#/completed">Completed</a>
  254.             </li>
  255.           </ul>
  256.           {/* Hidden if no completed items are left ↓ */}
  257.           <button className="clear-completed" onClick={this.handleClearCompleted}>Clear completed</button>
  258.         </footer>
  259.       </section>
  260.     );
  261.   }
  262. }
  263. ReactDOM.render(<Todos/>,document.getElementById('app'));

封装组件

拆分组件

把功能拆分为 <Todos /> <TodoItem /> <FooterBar /> 三个组件.
其实todos 这个例子并不适合我们这样组件化,因为组件和组件之间存在大量的数据联动,我们在处理某个组件的变量的同时需要同时考虑其他组件的变量,这个不仅增加了代码量,而且提高了代码逻辑的复杂度.那这里为什么要封装组件呢?
但通过这个案例,可充分体现react的设计思路:

  • 提高代码复用性
  • 体现react组件开发的优势
  • 体会并理解react 单向数据流 , 自上而下 的state 思想
    • 关于state:

状态提升:
通常，多个组件需要反映相同的变化数据，这时我们建议将共享状态提升到最近的共同父组件中去。让我们看看它是如何运作的。
任何可变数据应当只有一个相对应的唯一“数据源”。通常，state 都是首先添加到需要渲染数据的组件中去。然后，如果其他组件也需要这个 state，那么你可以将它提升至这些组件的最近共同父组件中。你应当依靠自上而下的数据流，而不是尝试在不同组件间同步 state。

  1. // 单个todo组件
  2. class TodoItem extends React.Component {
  3.   constructor(props){
  4.     super(props);
  6.   }
  7.   // 处理一个变化
  8.   handleCheckOne(id){
  9.     this.props.handleCheckOne(id)
  10.   }
  11.   // 双击编辑
  12.   handleEdit(id,e){
  13.     // 通过dom关系找到目标元素
  14.     var target = e.target.parentNode.nextElementSibling;
  15.     this.props.handleEdit(id,target);
  16.   }
  17.   handleEditChange(id,e){
  18.     var value = e.target.value;
  19.     this.props.handleEditInputChange(id,value);
  20.   }
  21.   handleOkOrCancel(id,e){
  22.     this.props.handleEditOkOrCancel(id,e);
  23.   }
  24.   render(){
  25.     return(
  26.       <li className={this.props.isDone?'completed':''}>
  27.         <div className="view" style={{display: this.props.isEdit?'none':'block'}}>
  28.           <input className="toggle" type="checkbox" checked={this.props.isDone} onChange={e=>this.handleCheckOne(this.props.id,e)}/>
  29.           <label onDoubleClick={e=>this.handleEdit(this.props.id,e)}>{this.props.text}</label>
  30.           <button className="destroy" onClick={e=>this.props.removeItem(this.props.id)}></button>
  31.         </div>
  32.         <input className="edit" onKeyUp={e=>this.handleOkOrCancel(this.props.id,e)}  style={{display: !this.props.isEdit?'none':'block'}} value={this.props.text} onChange={e=>this.handleEditChange(this.props.id,e)}  />
  33.       </li>
  34.     )
  35.   }
  36. }
  37. class FooterBar extends React.Component {
  38.   constructor(props){
  39.     super(props);
  40.     this.changeFilterState=this.changeFilterState.bind(this);
  41.     this.handleClearCompleted=this.handleClearCompleted.bind(this);
  42.   }
  43.   changeFilterState(state){
  44.     this.props.changeFilterState(state);
  45.   }
  46.   handleClearCompleted(){
  47.     this.props.handleClearCompleted();
  48.   }
  49.   render(){
  50.     return(
  51.       <footer className="footer">
  52.         {/* This should be `0 items left` by default */}
  53.         <span className="todo-count">
  54.           <strong>{this.props.itemLeft||0}</strong> item left
  55.         </span>
  56.         {/* Remove this if you don't implement routing */}
  57.         <ul className="filters">
  58.           <li onClick={e=>this.changeFilterState('all')}>
  59.             <a className={this.props.fitlerState=='all'?'selected':''} href="#/">
  60.               All
  61.             </a>
  62.           </li>
  63.           <li onClick={e=>this.changeFilterState('active')}>
  64.             <a className={this.props.fitlerState=='active'?'selected':''} href="#/active">Active</a>
  65.           </li>
  66.           <li onClick={e=>this.changeFilterState('completed')}>
  67.             <a className={this.props.fitlerState=='completed'?'selected':''} href="#/completed">Completed</a>
  68.           </li>
  69.         </ul>
  70.         {/* Hidden if no completed items are left ↓ */}
  71.         <button className="clear-completed" onClick={this.handleClearCompleted}>Clear completed</button>
  72.       </footer>
  73.     )
  74.   }
  75. }
  76. class Todos extends React.Component {
  77.   constructor(props){
  78.     super(props);
  79.     this.state = {
  80.       newTodoValue : '', 
  81.       todoList: [],
  82.       itemLeft: 0 , // 未完成剩余数量
  83.       allCheckState: false, // 全选状态
  84.       preEditValue: '',// 备份编辑前的内容
  85.       fitlerState: 'all', //all, active, completed
  86.     }
  87.     this.handleNewTodo = this.handleNewTodo.bind(this);
  88.     this.handleNewTodoEnter = this.handleNewTodoEnter.bind(this);
  89.     this.handleCheckOne = this.handleCheckOne.bind(this);
  90.     this.handleCheckAll = this.handleCheckAll.bind(this);
  91.     this.handleEdit = this.handleEdit.bind(this);
  92.     this.handleEditChange = this.handleEditChange.bind(this);
  93.     this.handleOkOrCancel = this.handleOkOrCancel.bind(this);
  94.     this.removeItem = this.removeItem.bind(this);
  95.     this.changeFilterState = this.changeFilterState.bind(this);
  96.     this.handleClearCompleted = this.handleClearCompleted.bind(this);
  97.   }
  98.   // 响应新增
  99.   handleNewTodo(e){
  100.     this.setState({
  101.       newTodoValue: e.target.value
  102.     })
  103.   }
  104.   // 处理新增
  105.   handleNewTodoEnter(e){
  106.     // enter or  esc 
  107.     if(e.keyCode === 13){
  108.       var todo = {
  109.         id: new Date().getTime(),
  110.         text: e.target.value,
  111.         isEdit: false,
  112.         isDone: false
  113.       }
  114.       var todoList = [...this.state.todoList];
  115.       todoList.push(todo);
  116.       // 添加新增 并修改表单内容
  117.       // 因为setState是异步的 
  118.       this.setState({
  119.         todoList,
  120.         newTodoValue: ''
  121.       },()=>{
  122.         this.regetItemLeft();
  123.       })
  124.     }else if(e.keyCode === 27){
  125.       this.setState({
  126.         newTodoValue: ''
  127.       })
  128.     }
  130.   }
  131.   // 当修改是否选中状态
  132.   handleCheckOne(id){
  133.     console.log('id',id)
  134.     var todoList = [...this.state.todoList];
  135.     var todo = todoList.find(item=>item.id == id);
  136.     todo.isDone = !todo.isDone;
  137.     // 修改state
  138.     this.setState({
  139.       ...todoList
  140.     })
  141.     this.regetItemLeft();
  142.   }
  143.   // 全选
  144.   handleCheckAll(){
  145.     if(this.state.todoList.length == 0) return;
  146.     // 注意: setState是异步的,必须在第二个回调才能获取最新状态
  147.     // # https://react.docschina.org/docs/state-and-lifecycle.html
  148.     this.setState(state=>({
  149.       allCheckState: !state.allCheckState
  150.     }),()=>{
  151.       // 更改每一项
  152.       var todoList = [...this.state.todoList];
  153.       todoList.map(item=>{
  154.         item.isDone = this.state.allCheckState;
  155.         return item;
  156.       })
  157.       // 
  158.       this.setState(state=>({
  159.         todoList
  160.       }),()=>{
  161.         // 更新剩余数量
  162.         this.regetItemLeft();
  163.       })
  165.     })
  166.   }
  167.   // 计算剩余
  168.   regetItemLeft(){
  169.     // 如果没有数据
  170.     if(this.state.todoList.length == 0){
  171.       // 处理全选
  172.       this.setState({
  173.         allCheckState: false
  174.       })
  175.       return;
  176.     }
  177.     // 设置剩余长度
  178.     var itemLefts = this.state.todoList.filter(item=>!item.isDone);
  179.     this.setState({
  180.       itemLeft: itemLefts.length
  181.     })
  182.     console.log(itemLefts.length)
  183.     // 响应全选
  184.     this.setState({
  185.       allCheckState: itemLefts.length==0
  186.     })
  187.   }
  188.   //双击编辑
  189.   handleEdit(id,target){
  190.     var todoList = [...this.state.todoList];
  191.     // 排他 只能有一个处于编辑状态
  192.     var beforeEditIndex = todoList.findIndex(item=>item.isEdit);
  193.     if(beforeEditIndex>-1){
  194.       todoList[beforeEditIndex].isEdit = false;
  195.     }
  196.     // 找到目标元素下标
  197.     var index = todoList.findIndex(item=>item.id == id);
  198.     todoList[index].isEdit = true;
  199.     this.setState({
  200.       todoList
  201.     },()=>{
  202.       target.focus();
  203.     })
  204.     // 备份旧内容 用于esc取消还原
  205.     this.setState({
  206.       preEditValue: todoList[index].text
  207.     })
  208.   }
  209.   // 编辑行数据变化
  210.   handleEditChange(id,value){
  211.     var todoList = [...this.state.todoList];
  212.     var index = todoList.findIndex(item=>item.id == id);
  213.     todoList[index].text = value;
  214.     this.setState({
  215.       todoList
  216.     })
  217.   }
  218.   // 编辑行确定
  219.   handleOkOrCancel(id,e){
  220.     var todoList = [...this.state.todoList];
  221.     // 找到目标元素下标
  222.     var index = todoList.findIndex(item=>item.id == id);
  223.     // 确定是esc还是enter
  224.     if(e.keyCode === 13){
  225.       todoList[index].isEdit = false;
  226.       this.setState({
  227.         todoList,
  228.         preEditValue: ''
  229.       })
  230.     }else if(e.keyCode === 27){
  231.       // 还原
  232.       todoList[index].text = this.state.preEditValue;
  233.       todoList[index].isEdit = false;
  234.       this.setState({
  235.         todoList,
  236.         preEditValue: ''
  237.       })
  238.     }
  239.   }
  240.   removeItem(id){
  241.     var todoList = [...this.state.todoList];
  242.     // 找到目标元素下标
  243.     var index = todoList.findIndex(item=>item.id == id);
  244.     todoList.splice(index,1);
  245.     this.setState({
  246.       todoList
  247.     })
  248.   }
  249.   // 改变filterState
  250.   changeFilterState(state){
  251.     this.setState({
  252.       fitlerState: state
  253.     })
  254.   }
  255.   // 清除所有完成的
  256.   handleClearCompleted(){
  257.     var todoList = [...this.state.todoList];
  258.     todoList = todoList.filter(item=>!item.isDone);
  259.     this.setState({
  260.       todoList
  261.     })
  262.   }
  263.   render() {
  264.     return (
  265.       <section className="todoapp">
  266.         <header className="header">
  267.           <h1>todos</h1>
  268.           <input
  269.             className="new-todo"
  270.             placeholder="What needs to be done?"
  271.             autoFocus
  272.             value = {this.state.newTodoValue}
  273.             onChange = {this.handleNewTodo}
  274.             onKeyUp= {this.handleNewTodoEnter}
  275.             />
  276.         </header>
  277.         {/* This section should be hidden by default and shown when there are todos */}
  278.         <section className="main">
  279.           <input id="toggle-all" className="toggle-all" type="checkbox" checked={this.state.allCheckState} onChange={this.handleCheckAll}/>
  280.           <label htmlFor="toggle-all">Mark all as complete</label>
  281.           <ul className="todo-list">
  282.             {
  283.               this.state.todoList.map(item=>{
  284.                 // 待办
  285.                 if(this.state.fitlerState == 'active'){
  286.                   if(item.isDone) return null;
  287.                 }
  288.                 // 已完成
  289.                 if(this.state.fitlerState == 'completed'){
  290.                   if(!item.isDone) return null;
  291.                 } 
  292.                 return(
  293.                   /*把整个item对象传入组件*/
  294.                   <TodoItem key={item.id} {...item} 
  295.                     handleEdit={this.handleEdit}  
  296.                     handleCheckOne={this.handleCheckOne} 
  297.                     handleEditInputChange={this.handleEditChange} 
  298.                     handleEditOkOrCancel={this.handleOkOrCancel}
  299.                     removeItem={this.removeItem}/>
  300.                 )
  301.               })
  302.             }
  303.           </ul>
  304.         </section>
  305.         <FooterBar fitlerState={this.state.fitlerState} itemLeft={this.state.itemLeft} changeFilterState={this.changeFilterState} handleClearCompleted={this.handleClearCompleted}/>
  306.       </section>
  307.     );
  308.   }
  309. }
  310. ReactDOM.render(<Todos/>,document.getElementById('app'));

什么时候封装组件?

至于什么时候需要组件封装,这个需要我们在以后的开发过程中根据实际情况来体会.这里我个人总结的两个原则:

  • 考虑功能模块的复用性
  • 提高代码的可读性,组件的逻辑性

    总结

    我们到目前为止,react的基本语法已经学完了.如果大家有vue基础,相信能很快理解并掌握react. 当然react还有路由管理,状态管理等相关知识点,我们会在接下来的项目开发中,带大家直接上手,在开发中理解并学会其应用.