react入门系列之todolist代码优化（使用react 新特性，es6语法）

Posted 2022-07-20 boye-1990

代码优化

1 /**
2 - 今天我们通过es6语法，以及react新特性来优化我们的todo-list
3 - 顺带解决上个版本的key报错问题
4 */

使用es6的解构赋值优化代码

 1 /**
 2 - 当我们需要一个对象某个属性的时候，我们可以使用解构赋值，这样在后续的代码就不需要通过原对象不停调用属性去获取了
 3 - const  index  = this.props -----> 这就是解构赋值，在后续同一作用域使用this.props.index的时候直接使用index就可以了。
 4 - item.js代码修改如下,app.js的代码就不在此展示了,各位自行修改。
 5 */
 6 
 7 import React, Component, Fragment from ‘react‘;
 8 
 9 class Item extends Component 
10     deletItem = () => 
11         const  deletItem, index  = this.props; // 解构赋值
12         deletItem(index);
13     
14     render()
15         const  value  = this.props; //解构赋值
16         return(
17             <Fragment>
18                 <div
19                 onClick = this.deletItem
20                 >
21                 value
22                 </div>
23             </Fragment>
24         )
25     
26 
27 
28 export default Item

react新特性

 1 /**
 2 - 旧版本的react提供的setState()方法，只能接收一个对象。
 3 - 新版本的react中，setState()还可以接收一个函数，并且该函数有一个默认参数prevState
 4 - prevState表示未修改之前的state，也就是说我们在使用的时候无需再用this.state去获取属性了
 5 - 另外在原先的代码中我们的render函数写得过于长，现将用一个函数将使用map函数的逻辑部分抽出来
 6 - 解决key值报错问题，在引入item组件后使用的时候，给每一个item绑定一个key，目前我们现使用index，
 7 - 后续我们讲解虚拟dom的时候再讲解为何开发中我们不要使用index去给key赋值。
 8 - 现在使用这个特性去优化我们的app.js,代码如下。
 9 */
10 import React,  Component, Fragment from ‘react‘;
11 import Item from ‘./item.js‘
12 
13 class App extends Component 
14   constructor(props)
15     super(props);
16     this.state = 
17       inputValue: ‘‘,// 用来存储 input框中的 value值。
18       list:[] // 用来存储 每一个li的 value值。
19     
20   
21   handleInputChange = (e) => 
22     const value = e.target.value;
23     this.setState(() => (inputValue: value))//新版的react中的setState()函数可以接收一个函数，箭头函数的函数体使用（）包裹可以省略return
24   
25   addList = () => 
26     this.setState((prevState) =>  // 同时setState函数还提供一个prevState参数，这个参数代表未改变之前的this.state
27       const list = [...prevState.list, prevState.inputValue];
28       return 
29         list,
30         inputValue: ‘‘ // 添加完毕以后清空input框
31       
32     )
33   
34   deletListItem = (index) =>  // 因为在绑定该方法的时候使用了bind函数，所以这里可以不实用箭头函数去保证this的指向
35     this.setState((prevState) => 
36       let list = [...prevState.list];
37       list.splice(index, 1);
38       return list;
39     )
40   
41   // 在原先的代码中我们的render函数写得过于长，现将使用map函数的逻辑部分抽出来
42   getItem = () => 
43     return (
44       this.state.list.map((item, index) => 
45         return(
46           <Item 
47           key = index // 解决key值问题。
48           value = item 
49           index = index
50           deletItem = this.deletListItem
51           ></Item>
52         )
53       )
54     )
55   
56   render()
57     return (
58       <Fragment>
59       <div>
60         <input
61         onChange =  this.handleInputChange 
62         value = this.state.inputValue 
63         />
64         <button onClick =  this.addList >提交</button>
65       </div>
66       <ul>
67         this.getItem() /** 在次调用抽出来的逻辑函数，调用一下即可。*/
68       </ul>
69       </Fragment>
70     );
71   
72 
73 export default App;

后续还有更新...........