React笔记03——React实现TodoList

1 什么是JSX语法？

原生JS中，要向页面中挂载html标签，标签一定是被引号''包起来的：document.getElementById('root').append('<div>hello world</div>');

但在JSX语法中，不需要用引号包起来，这是JSX语法中的显著特点。

JSX中有两种类型的标签：

1⃣️普通的html标签(如App.js中的<div>hello</div>)

一般标签的首字母是小写的

2⃣️组件标签(如index.js中的<App />)

标签的首字母必须是大写的

2 React中的数据驱动思想和事件绑定

数据驱动思想：

React的所有功能都不直接操作DOM，而是直接操作数据。

在我们的TodoList项目中一共有两种数据：input中输入的数据和页面上显示的数据，找到了它们就可以把网页完整渲染出来了。

事件绑定：

原生JS中为input绑定事件，使用的是onchange属性；

在React中要写成onChange，接着为其绑定一个函数，并在render函数上方定义这个函数。

<input value = {this.state.inputValue} onChange = {this.handleInputChange.bind(this)}/>

3 使用React编写TodoList

1）创建入口文件index.js,创建组件文件TodoList.js，在index.js中引入TodoList组件。

//index.js
import React from 'react';
import ReactDOM from 'react-dom';
import TodoList from './TodoList';

ReactDOM.render(<TodoList />, document.getElementById('root'));

2) 完善TodoList组件

1⃣️简单布局

render()函数只能识别一个标签，如果页面中有多个平级标签，要把它们最终包到一个div中，使得最外层只有一个标签。

但是在一些复杂的逻辑中，要求多个平级标签必须直接暴露在id为root的div中，不允许在外层再包裹一个div，那该怎么办呢？

React 16中提供了一个新的占位符组件Fragment，我们可以在TodoList组件中引入它，把多个标签统一放到Fragment标签中，就可以解决报错问题，且不会在页面中添加多余的标签。

//TodoList.js
import React , { Component , Fragment } from 'react';

class TodoList extends Component {
	render() {
		return (
    		<Fragment>
    			<input />
    			<ul>
    				<li>learn React</li>
    				<li>learn React</li>
    			</ul>
    		</Fragment>
  		);
	}
}

export default TodoList; 

2⃣️在组件中定义项目中的数据

在我们的TodoList项目中一共有两种数据：input中输入的数据和页面上显示的数据，找到了它们就可以把网页完整渲染出来了。

在render函数上方定义一个新的函数——constructor()函数。

在组件被使用的一瞬间，会首先自动执行constructor函数，组件会接收外部传入的参数，并使用super函数把参数传递给其基类（基类就是父类，派生类就是子类）的构造函数中，在super后我们可以通过this.state来定义数据！【这里涉及到React的底层原理】

定义完数据后，我们需要在页面标签中引用这个数据，但是不能直接使用<input value = this.state.inputValue/>这种写法，因为这里使用的是JSX语法，如果直接将属性值 = 一个JS中的变量或者表达式，会报错，因此要将变量或表达式用花括号{}括起来——<input value = {this.state.inputValue}/>。

但是这里的数据是静态的，我们在输入框输入新的内容或想对其进行修改时会发现并不奏效，为了使数据能够动态的变化，我们需要为input绑定一个事件。

import React , { Component , Fragment } from 'react';

class TodoList extends Component {
	constructor(props) {
		super(props);
		this.state = {
			inputValue:'hello world',
			list:[]
		}
	}
	render() {
		return (
    		<Fragment>
    			<input value = {this.state.inputValue}/>
    			<ul>
    				<li>learn React</li>
    				<li>learn React</li>
    			</ul>
    		</Fragment>
  		);
	}
}

export default TodoList; 

3⃣️事件绑定

原来的this是undefined，input中数据变化，调用this.state时会报错，这里用es6中的bind方法，使this变为当前组件。然鹅，input中的值还是没有同步变化。。。

这是因为我们不能直接通过this.state来修改数据，而是要通过一个函数——this.setState()函数。

import React , { Component , Fragment } from 'react';

class TodoList extends Component {
	constructor(props) {
		super(props);
		this.state = {
			inputValue:'hello world',
			list:[]
		}
	}
	handleInputChange(e) {
		this.setState({
			inputValue: e.target.value
		});
	}
	render() {
		return (
    		<Fragment>
    			<input value = {this.state.inputValue}
    				   onChange = {this.handleInputChange.bind(this)}/>
    			<ul>
    				<li>learn React</li>
    				<li>learn React</li>
    			</ul>
    		</Fragment>
  		);
	}
}

export default TodoList; 

4⃣️处理list中的数据

根据list中的数据的情况，将数据循环显示到页面中；使用es6中的map函数实现数组循环。

list中数据的显示：

import React , { Component , Fragment } from 'react';

class TodoList extends Component {
	constructor(props) {
		super(props);
		this.state = {
			inputValue:' ',
			list:['learn React','learn Vue','learn JS']
		}
	}
	handleInputChange(e) {
		this.setState({
			inputValue: e.target.value
		});
	}
	render() {
		return (
    		<Fragment>
    			<input value = {this.state.inputValue}
    			       onChange = {this.handleInputChange.bind(this)}/>
    			<ul>
    				{
    					this.state.list.map((value,index) => {
    					return <li>{value}</li>
    					})
    				}
    			</ul>
    		</Fragment>
  		);
	}
}

export default TodoList; 　

此时，数据能够成功显示，但控制台会报出警告⚠️index.js:1 Warning: Each child in a list should have a unique "key" prop.

为了使list中每个值能够唯一对应，我们需要为每条数据定义key属性。

<li key = {index}>{value}</li>

动态显示list中数据：

实现在input输入数据后，敲回车，数据同步添加到list中。

我们要再为input绑定一个事件——onKeyUp

        handleKeyUp(e) {
		if(e.keyCode === 13){
			// const list = [...this.state.list];
		//es6中语法，相当于const list = ['learn React','learn Vue','learn JS']
		const list = [...this.state.list,this.state.inputValue];
		this.setState({
			list:list
		});
		}
	}
	render() {
		return (
    		<Fragment>
    			<input value = {this.state.inputValue}
    				   onChange = {this.handleInputChange.bind(this)}
    				   onKeyUp = {this.handleKeyUp.bind(this)}/>
    			<ul>
    				{
    					this.state.list.map((value,index) => {
    					return <li key = {index}>{value}</li>
    					})
    				}
    			</ul>
    		</Fragment>
  		);
	}
}    　　

进一步完善代码，对代码进行精简⬇️：

将初始list值置为空数组；

key和对应值相同不用重复写{list:list}，直接写{list}即可。

实现按回车后，清空input中内容的功能。

	handleKeyUp(e) {
		if(e.keyCode === 13){
			// const list = [...this.state.list];
		//es6中语法，相当于const list = ['learn React','learn Vue','learn JS']
		const list = [...this.state.list,this.state.inputValue];
		this.setState({
			list,
			inputValue:''
			});
		}
	}

删除list中的数据：

实现点击某个列表项，就将其删除的功能。

需要为li标签绑定点击事件。

import React , { Component , Fragment } from 'react';

class TodoList extends Component {
	constructor(props) {
		super(props);
		this.state = {
			inputValue:' ',
			list:[]
		}
	}
	handleInputChange(e) {
		this.setState({
			inputValue: e.target.value
		});
	}
	handleKeyUp(e) {
		if(e.keyCode === 13){
			// const list = [...this.state.list];
		//es6中语法，相当于const list = ['learn React','learn Vue','learn JS']
		const list = [...this.state.list,this.state.inputValue];
		this.setState({
			list,
			inputValue:''
			});
		}
	}
	handleItemClick(index) {
		const list = [...this.state.list];
		list.splice(index,1);
		this.setState({list});
	}
	render() {
		return (
    		<Fragment>
    			<input value = {this.state.inputValue}
    				   onChange = {this.handleInputChange.bind(this)}
    				   onKeyUp = {this.handleKeyUp.bind(this)}/>
    			<ul>
    				{
    					this.state.list.map((value,index) => {
    					return <li key = {index}
    							   onClick = {this.handleItemClick.bind(this,index)}
    							>
    							{value}
    							</li>
    					})
    				}
    			</ul>
    		</Fragment>
  		);
	}
}

export default TodoList;

4 更多JSX语法细节

1⃣️为标签绑定事件时，每次都要使用bind函数生成一个新函数来更新this，这样会对性能有影响。

我们可以把对this的绑定放到constructor函数中来做，这样只在组件创建一瞬间执行这段代码，不会每次触发都要执行一遍，提高了性能。

但如果bind函数中除了传递this还要传递其他参数，就不能使用这种方法了，因为这里每触发一次事件，传递但参数可能都是不同的，不能统一写到constructor中。

2⃣️循环获取list中的内容这部分也可以单独放到一个函数中。

3⃣️引入css样式

在src目录下创建css文件：style.css

在index.js中使用import引入css文件

import './style.css';

注：React会混淆定义组件的class关键字和标签中的class属性，因此要用className来定义标签中的class，否则控制台会有警告⚠️。

4⃣️for

实现点击输入框对应的label，输入框自动对焦。

<label for = 'myinput'>请输入内容：</label>
<input id = 'myinput'>

可以实现效果，但是这时控制台会报警告⚠️index.js:1 Warning: Invalid DOM property `for`. Did you mean `htmlFor`?

这是因为在JSX语法中，label中的for属性会与JS中的for循环关键字混淆，因此要把label中的for属性写为htmlFor

5⃣️JSX语法中的注释

JSX语法的标签中，无论是JS中的变量、表达式还是注释，都要用花括号{}包起来。

6⃣️实现当输入内容为空时，不添加到页面

增加一个判断条件

e.target.value !== ''

7⃣️html转义问题

在输入框中输入html标签，显示到页面中时会被转义为普通文本，如果想显示标签的效果要使用dangerouslySetInnerHTML = {{__html:value}}

dangerouslySetInnerHTML里面传的是一个JS对象

最终代码：

import React , { Component , Fragment } from 'react';
import './style.css'

class TodoList extends Component {
	constructor(props) {
		super(props);
		this.handleInputChange = this.handleInputChange.bind(this);
		this.handleKeyUp = this.handleKeyUp.bind(this);
		this.state = {
			inputValue:'',
			list:[]
		}
	}
	handleInputChange(e) {
		this.setState({
			inputValue: e.target.value
		});
	}
	handleKeyUp(e) {
		if(e.keyCode === 13 && e.target.value !== ''){
			// const list = [...this.state.list];
		//es6中语法，相当于const list = ['learn React','learn Vue','learn JS']
		const list = [...this.state.list,this.state.inputValue];
		this.setState({
			list,
			inputValue:''
			});
		}
	}
	handleItemClick(index) {
		const list = [...this.state.list];
		list.splice(index,1);
		this.setState({list});
	}
	getListItems() {
		return this.state.list.map((value,index) => {
    		return <li key = {index}
    			       onClick = {this.handleItemClick.bind(this,index)}
    			       dangerouslySetInnerHTML = {{__html:value}}
    				>
    				</li>
    		})
		}
	render() {
		return (
    		<Fragment>
    			<label htmlFor = 'myinput'>请输入内容：</label>
    			<input id = 'myinput'
    				   className = 'input'
    				   value = {this.state.inputValue}
    				   onChange = {this.handleInputChange}
    				   onKeyUp = {this.handleKeyUp}/>
    			<ul>
    				{ this.getListItems() }
    			</ul>
    		</Fragment>
  		);
	}
}

export default TodoList;