React基础

[253867843]

第一部分: 简介(后续补上)

第二部分: 基础

第三章

1.占位符

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

class TodoList extends Component {
	render() { --- (1)
		return (
			<Fragment> ---(2)
				<div></div>
			</Fragment>
		)
	}
}

(1) 组件显示的内容通过render()函数来进行返回.
(2) 在JSX语法中, 我们要求一个组件render()函数返回的内容, 外层必须有一个包裹元素 --- 占位符.

2.React中响应式设计思想和事件绑定

(1)响应式设计思想

	this.state = {inputValue: ''};
	<input value= {this.state.inputValue}/>

(2)事件绑定

	<input onChange={this.handleInputChange} />
	handleInputChange() {
		// ...
	}

3.在React中:

(1)我们只需要操作数据, 不需要直接操作DOM.
(2)React会自动感知到数据的变化, 自动帮你去生成DOM, 将数据映射到页面上.
(3)例子: input输入框值改变 >>> 操作数据, 修改inputValue的数据.
(4)例子: 删除功能 >>> 操作数据, 删除list[]数组中的数据.

4.constructor():

(1))可以在constructor中用来"定义数据".
(2)当我们去使用这个组件的时候, constructor()这个构造函数会优于其他任何函数, 会自动的/优先的被执行.
(3)constructor()最优先被执行.

constructor(props) {
	super(props);
	this.state = {
		inputValue: ''
	};
}

5.JSX语法:

(1)在JSX语法中, 使用"JS表达式"或"JS变量", 需要加上"{}"
(2)
(3)
例子: JS表达式

	case1: 事件绑定
	<input onChange={this.handleChange}/>
	handleChange() {
		// ...
	}
	case2: 循环
	{
		this.state.list.map(()=> {...})
	}

例子: JS变量

	this.state = {inputValue: ''};
	<input value= {this.state.inputValue}/>
	inputValue表示"JS变量"

()
()
()
()

6.React的含义

(1)React在英文中是响应的意思.

7.e.target和e.target.value

(1)e.target: 表示框对应的DOM节点
(2)e.target.value: 表示框对应的DOM节点上的值
(3)例子:

	<input onChange={this.handleChange}/>
	handleChange(e) {
		console.log(e.target); --- <input>框对应的DOM节点
		console.log(e.target.value); --- <input>框对应的DOM节点上的值
	}

7.受控组件

(1)例子: 输入框中的数据变化
()
()

8.非受控组件

9.修改state

(1)推荐使用this.setState(() => {...}); 接收一个函数作为参数.

简单对象:
const value = e.target.value;
this.setState(()=>({
	inputValue: value
}));

接收一个参数prevState
this.setState((prevState) => ({
	list: [...prevState.list, prevState.inputValue],
}));
prevState: 表示你修改数据之前的数据是什么样的.
prevState === this.state

不使用es6写法
this.setState((prevState) => {
    const list = [...prevState.list];
    list.splice(index, 1);
    return {list}
});

10.绑定this

(1)将使用的函数都写在constructor()构造函数中

constructor(props) {
	super(props);
	this.handleInputChange = this.handleInputChange.bind(this);
}

<input onChange={this.handleInputChange}/>

(2)使用的函数带参数:

constructor(props) {
	super(props);
	this.handleDeleteItem = this.handleDeleteItem.bind(this);
}

<li onClick={() => this.handleDeleteItem(index)}/>

11.state唯一性

(1)操作数组: list: [...prevState.list, prevState.inputValue]
使用[...]表示从原来的list[]数组上拷贝一份, 然后在拷贝件上做修改.
(2)操作字符串: 直接修改

12.循环:

(1)循环是JS表达式:

	{
		this.state.list.map((item, index)=> {
			return <li>{item}</li>
		})
	}

(2)key值: 放在循环最外层的元素上.

	return <li key={item}>{item}</li>

(3)循环提取到一个函数中:

	<ul>
		{this.getTodoList()}
	</ul>
	
	getTodoList() {
		return this.state.list.map((item, index)=> {
			return <li>{item}</li>
		})
	}

13.组件和元素

(1)组件 --- 首字母大写
(2)元素 --- 首字母小写

14.注释

(1)JSX注释: {/JSX注释/}
(2)html注释:
(3)css注释: /css注释/

15.重命名

(1)class >>> className
(2)for >>> htmlFor

<label htmlFor="insertValue">输入</label>
<input id="insertValue"/>

16.不转义

(1)dangerouslySetInnerHTML

<li
	key={index}
	onClick={() => this.handleItemDelete(index)}
	dangerouslySetInnerHTML={{__html: item}}
>
</li>

{{}}: 
第一层{}表示是一个JS表达式
第二层{}表示JS表达式是一个对象

不转义存在XXS攻击的可能

17.组件间通信:

(1)父组件 >>> 子组件

<TodoItem content={item} index={index}/> --- 通过属性的方式传递
props >>> this.props.content
props >>> this.props.index

(2)子组件 >>> 父组件

本质上, 子组件调用父组件的方法来修改父组件的内容
流程:
1.子组件创建一个方法.
2.在子组件中调用父组件的方法.

<div onClick={this.handleClick}>
	...
</div>

handleClick() {
	const {deleteItem, index} = this.props;
	deleteItem(index);
}

18.围绕React衍生出的思考

(1)声明式开发
声明式开发 --- React会根据数据构建DOM, 节约大量DOM操作的代码.
命令式开发 --- Jquery, 直接操作DOM, 命令式编程, 60%~70%的DOM操作.
(2)可以与其他框架并存
React只负责<div id="root"></div>下的内容
(3)组件化
(4)单向数据流
(5)React视图层框架
视图层: 数据和页面渲染上的问题
组件间的传值, React并不关心
(6)函数式编程
方便测试, 前端自动化测试

** setState()是一个异步函数.