为了更好地学习react，在网上找到了Dell lee大神的react入门学习
教程地址：https://www.imooc.com/learn/1023
形如 http://todolist.cn/ 最简单的代办事项列表

知识点

了解出口入口，组件。调用数据，函数，构造函数，事件，父子组件。

重点难点

1.this的使用
2.定义组件以及调用，jsx的思想
3.父子组件之间的通信（传递参数）

文件目录结构

image.png

代码

index.js部分

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import TodoList from './TodoList';
ReactDOM.render(<TodoList />, document.getElementById('root'));

todoList.js

import React, { Component } from 'react';

//定义一个React组件
class TodoList extends Component {
  //构造函数
  constructor(props){
    super(props);//用于初始化
    this.state = {//用于存数据内容
      list:[
        'learn react',
        'learn antDesign',
        'learn antDesign123'
      ]
    }
  }

  // onclick函数
  handleBtnClick(){
    // this.state.list.push('Hello world');//无法刷新
    this.setState({
      list:[...this.state.list,'hello world']
    })
  }

  //组件必须含有render函数，负责页面要显示的内容
  render() {
    //JSX语法，使用可以在reactJs中写出html
    return (
      // 注意只能返回一个jsx(理解大容器只能有一个)
      //this.handleBtnClick改+。bind(this),保证执行该函数的this指向的不是button而是组件，方可调用this.state
      <div>
          <input />
          <button onClick={this.handleBtnClick.bind(this)}>add</button>
          <ul>
            {
              // 循环list的数据放在一个标签内
              this.state.list.map((item,index) => {
                return <li key="{index}">{item}</li>
              })
            }
          </ul>
      </div>
    );
  }
}

// 导出一个组件
export default TodoList;

新增列表项之获取input里面的value

效果

添加input里的内容到列表，并在添加的同时清空input里的值

代码

修改todoList.js部分

 constructor(props){
    inputValue:''
  handleBtnClick(){
       //list:[...this.state.list,'hello world'],
       list:[...this.state.list,this.state.inputValue],
      inputValue:''//用于每次添加完后清空input
  }

handleInputClick(e){
     this.setState({
         inputValue:e.target.value
      })
}
// render里面
<input value={this.state.inputValue} onChange={this.handleInputClick.bind(this)}/>

删除列表项

效果

点击列表项删除对应项目

代码

修改todoList.js部分

  //获取列表前的(索引)，并删除
handleItemClick(index){
      const list = [...this.state.list];
    //拷贝list(直接改state的内容也可以，但是并不建议这样，避免实操误操作)
      list.splice(index,1);//删除对应索引的一个内容
      this.setState({
          list: list
     })
 }
 return (
    <li key={index} onClick={this.handleItemClick.bind(this,index)}>
    {item}
    </li>)

拆分组件之——多组件

概念

React当中存在着父子组件的概念，打个比方如下例子，todolist就是父组件，todoItem就是子组件。

父子组件之间的信息传递

1.父组件通过属性的形式向子组件传递参数，而子组件通过props获取父组件传递过来的参数。
2.父组件获取子组件的传递值（即子组件与父组件的通信），子组件要调用父组件传递过来的方法。EX：父组件创建对应方法并通过属性传递一个方法给子组件，子组件通过props.方法（）获取

代码

修改todoList.js部分

  //获取列表前的(索引)，并删除
 handleDelete(index){
    const list = [...this.state.list];//拷贝list(直接改state的内容也可以，但是并不建议这样，避免实操误操作)
    list.splice(index,1);//删除对应索引的一个内容
    this.setState({
      list:list
    })
    console.log(index);//测试从子组件获取的index
  }
 return ( <TodoItem delete1={this.handleDelete.bind(this)} key={index} content={item} index={index}/>)//用属性传值

细化组件之添加TodoItem.js

import React from 'react';

class TodoItem extends React.Component{

    //子组件向父组件传值，告诉父组件删除index对应item
    handleDelete(){
        this.props.delete1(this.props.index);
    }

    render(){
        return(
            //通过this.props获取传值
            <div onClick={this.handleDelete.bind(this)}>{this.props.content}</div>
        )
    }
}
export default TodoItem;

优化代码

优化要点

1.调用优化
举例子：

//定义一个React组件
class TodoList extends Component {
    //用于下方调用，可提升代码的执行性能！
   this.handleInputClick = this.handleInputClick.bind(this);
   this.handleBtnClick = this.handleBtnClick.bind(this);
   this.handleDelete = this.handleDelete.bind(this);
  }

2.return传子组件多行传值优化
3.拆分return成为一个函数
4.样式优化
入口文件引入样式

import "./xxx.css"

最初都是使用style、class、id等，此处要注意跟以往不同格式

//以对象的形式写
    style={{backgroung:'red',}}
//class改为className
    className = ‘xxx’

5.最外层div改为React.Fragment
6.react组件的引用继承

import React, { Component ,Fragment } from 'react';
//则下方不用再用React.Component 或React.Fragment，直接用Component ，Fragment