代码地址如下：

大家好，我是小七月，在学习react语言的关于类组件的途中，使用了react知识实现了一个小Demo,功能是小，但是知识点满满，下面我将为大家介绍。

react的安装

官方推荐使用create-react-app来创建一个新的react项目。 目前create-react-app不推荐全局安装了，所以可以先自己建立一个文件夹，执行下面的命令。

npm init // 生成package.json文件
npm install create-react-app
npx create-react-app my-app // 执行node_modules/bin文件夹下的命令
cd my-app
npm start

react的基本使用

1. react中使用state来保存响应式数据，在calss组件中，直接在construction方法中初始化state的数据。若是函数式组件，需要使用useState钩子。

2. react中State使用时，有以下注意点：

   不能直接修改state数据，如以下的代码是不会触发更新,应该使用setState()，而且当修改一个对象时，不要直接在原对象中进行修改，而是应该使用一个新的对象对其进行修改，因为当类型为Object时，赋值为址引用，不能触发组件更新。

this.state.books.splice(1,1) // 错误示范
// 错误示范-arr和原来的指向了一个对象，
let arr = this.state.books;
arr.splice(1,1);
this.setState(arr)
// 正确示范
let arr = [...this.state.books];
arr.splice(1, 1);
this.setState({
books: arr
});

1. 使用ReactDOM.render去将组件挂载在根元素上

import ReactDom from 'react-dom';
ReactDom.render(<App />, document.querySelector('#app'));

1. 使用jsx来书写render函数

   ① jsx支持在里面写表达式，如下就是使用map函数生成表格的列头

 <tr>
  <th></th>
  {columns.map((col) => (
    <th key={col.dataIndex}>{col.title}</th>
  ))}
</tr>

② jsx使用大括号来表示变量，使用引号属性值指定为字符串字面量

1. 为元素绑定事件时，对于类组件需要注意this的指向问题。

 <td>
    <button onClick={(e) => this.handleRemove(index)}>移除</button>
</td>
handleRemove(index) {
  let arr = [...this.state.books];
  arr.splice(index, 1);
  console.log(arr);
  this.setState({
    books: arr
  });
}

注意：给onClick传入一个箭头函数，由于箭头函数中的this默认指向的是上层作用域中的this及该calss组件，所以能够在handleRemove中使用state变量。若不传箭头函数，那么则需要使用bind函数去改变指向，否则在handelRemove中this指代的为undefined。