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

代码优化

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;

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

原文地址：https://www.cnblogs.com/boye-1990/p/11367495.html