React 组件

创建组件

组件分为两类，分别是函数式组件，以及类组件

函数式组件

在这里插入图片描述
函数式组件中的 this
在这里插入图片描述
babel 官网的试一试，可以把函数复制进来看一看

类组件

类中的一般方法放到了类的原型对象上

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script type="text/babel">
	//1.创建类式组件
	class MyComponent extends React.Component {
		render() {
			//render是放在哪里的？—— MyComponent的原型对象上，供实例使用。
			//render中的this是谁？—— MyComponent的实例对象 <=> MyComponent组件实例对象。
			console.log("render中的this:", this);
			return <h2>我是用类定义的组件(适用于【复杂组件】的定义)</h2>;
		}
	}
	//2.渲染组件到页面
	ReactDOM.render(<MyComponent />, document.getElementById("test"));
	/*
		执行了ReactDOM.render(<MyComponent/>.......之后，发生了什么？
				1.React解析组件标签，找到了MyComponent组件。
				2.发现组件是使用类定义的，随后new出来该类的实例，并通过该实例调用到原型上的render方法。
				3.将render返回的虚拟DOM转为真实DOM，随后呈现在页面中。
	*/
</script>

组件三大特征

  • state
  • props
  • ref

state

首先设置组件的 state，进行状态的初始化：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script type="text/babel">
  class Weather extends React.Component {
    constructor(props) {
      super(props); 	// 注意这个是提前写的
      this.state = {	// 初始化状态
        isHot: true,
      };
    }
    render() {
      const { isHot } = this.state;
      return <h1>今天天气很{isHot ? "炎热" : "凉爽"}</h1>;
    }
  }
  ReactDOM.render(<Weather />, document.querySelector("#test"));
</script>

添加点击事件：

在这里插入图片描述

类中的方法默认开启了局部的严格模式

setState

状态不可以直接更改，必须要借助一个内置的 API：setState({})，要求必须传递一个对象，而且是合并操作

复杂模式的修改，理解一下this和其他的概念

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<script type="text/babel">
	//1.创建组件
	class Weather extends React.Component{

		//构造器调用几次？ ———— 1次
		constructor(props){
			console.log('constructor');
			super(props)
			//初始化状态
			this.state = {isHot:false,wind:'微风'}
			//解决changeWeather中this指向问题
			this.changeWeather = this.changeWeather.bind(this)
		}

		//render调用几次？ ———— 1+n次 1是初始化的那次 n是状态更新的次数
		render(){
			console.log('render');
			//读取状态
			const {isHot,wind} = this.state
			return <h1 onClick={this.changeWeather}>今天天气很{isHot ? '炎热' : '凉爽'}，{wind}</h1>
		}

		//changeWeather调用几次？ ———— 点几次调几次
		changeWeather(){
			//changeWeather放在哪里？ ———— Weather的原型对象上，供实例使用
			//由于changeWeather是作为onClick的回调，所以不是通过实例调用的，是直接调用
			//类中的方法默认开启了局部的严格模式，所以changeWeather中的this为undefined

			console.log('changeWeather');
			//获取原来的isHot值
			const isHot = this.state.isHot
			//严重注意：状态必须通过setState进行更新,且更新是一种合并，不是替换。
			this.setState({isHot:!isHot})
			console.log(this);

			//严重注意：状态(state)不可直接更改，下面这行就是直接更改！！！
			//this.state.isHot = !isHot //这是错误的写法
		}
	}
	//2.渲染组件到页面
	ReactDOM.render(<Weather/>,document.getElementById('test'))

</script>

在开发中很少使用到构造函数，所以，属性和方法的设置，类似下面的代码块

  • 属性：用赋值语句
  • 方法：用赋值+箭头函数
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script type="text/babel">
	//1.创建组件
	class Weather extends React.Component{
		//初始化状态
		state = {isHot:false,wind:'微风'}

		render(){
			const {isHot,wind} = this.state
			return <h1 onClick={this.changeWeather}>今天天气很{isHot ? '炎热' : '凉爽'}，{wind}</h1>
		}

		//自定义方法————要用赋值语句的形式+箭头函数
		changeWeather = () => {
			const isHot = this.state.isHot
			this.setState({isHot:!isHot})
		}
	}
	//2.渲染组件到页面
	ReactDOM.render(<Weather/>,document.getElementById('test'))

</script>

总结一下：

  1. 组件中render方法中的this为组件实例对象
  2. 组件自定义的方法中this为undefined，如何解决？
    a). 强制绑定 this: 通过函数对象的bind()
    b). 箭头函数
  3. 状态数据，不能直接修改或更新

props

基本传递

外部往组件中带东西
在这里插入图片描述

批量传递

在这里插入图片描述
而且 ...obj 在 babel 和 react 环境下，只有在标签上才可以，如果你想输出的话是不可以的。

在这里插入图片描述

函数式组件的传值

在这里插入图片描述

对 Props 进行限制【类式组件】

通过引入新的库 prop-types.js ，引入完之后，全局中会多出个新的对象，叫做：PropTypes

  • 类型限制
  • 必要性的显示
  • 默认值的设置
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
class Person extends React.Component {
  render() {
    const { name, age, sex } = this.props;
    return (
      <ul>
        <li>姓名：{name}</li>
        <li>性别：{sex}</li>
        <li>年龄：{age + 1}</li>
      </ul>
    );
  }
}

//对标签属性进行类型、必要性的限制
Person.propTypes = {
  name: PropTypes.string.isRequired, //限制name必传，且为字符串
  sex: PropTypes.string, //限制sex为字符串
  age: PropTypes.number, //限制age为数值
  speak: PropTypes.func, //限制speak为函数
};

//指定默认标签属性值
Person.defaultProps = {
  sex: "男", //sex默认值为男
  age: 18, //age默认值为18
};

在这里插入图片描述

对 Props 进行限制【函数式组件】

对 prop 的限制，也就是给这个类填上些属性
在这里插入图片描述

refs

字符串形式的 refs （不推荐使用）

通过给 ref 属性，可以给标签添加标记，比方说下面 handle1 方法中通过 refs 拿到 input 原生DOM

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script type="text/babel">
  class Demo extends React.Component {
    handle1 = () => {
      console.log(this);
      const { inp1 } = this.refs;
      alert(inp1.value);
    };
    render() {
      return (
        <div>
          <input ref="inp1" type="text" />
          <button onClick={this.handle1}>点我</button>
        </div>
      );
    }
  }
  ReactDOM.render(<Demo />, document.querySelector("#test"));
</script>

打开控制台看一下
在这里插入图片描述

回调 ref

基本使用

react 会帮你调用你在 ref 中定义的函数，并且把当前的标签节点作为形参传入函数中

在这里插入图片描述

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script type="text/babel">
  class Demo extends React.Component {
    handle1 = () => {
      const { inp1 } = this;
      alert(inp1.value);
    };
    render() {
      return (
        <div>
          <input type="text" ref={(c) => (this.inp1 = c)} />
          <button onClick={this.handle1}>点击</button>
        </div>
      );
    }
  }
  ReactDOM.render(<Demo />, document.getElementById("test"));
</script>

调用次数

如果你用内联函数的话，那么在组件更新的时候会调用两次

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<script type="text/babel">
  class Demo extends React.Component {
    state = {
      isHot: false,
    };

    handle1 = () => {
      const { inp1 } = this;
      alert(inp1.value);
    };

    handleChangeWeather = () => {
      const { isHot } = this.state;
      this.setState({
        isHot: !isHot,
      });
    };

    render() {
      const { isHot } = this.state;
      return (
        <div>
          <h1>今天天气很{isHot ? "炎热" : "凉爽"}</h1>
          <input
            type="text"
            ref={(c) => {this.inp1 = c; console.log("回调ref:>>", c);}}
          />
          <br />
          <button onClick={this.handle1}>点我获取</button>
          <button onClick={this.handleChangeWeather}>点我切换天气</button>
        </div>
      );
    }
  }
  ReactDOM.render(<Demo />, document.getElementById("test"));
</script>

代码执行后的效果如下图所示：
请添加图片描述

这个在官方文档上也有说明，拉倒最底下

在这里插入图片描述
官方说如果是内联函数的话，那么在每次渲染的时候又会创建新的函数实例，解决的办法就是绑定好了，别让它创建即可
在这里插入图片描述
修改后的代码效果如下：
在这里插入图片描述

createRef API （官方推荐的方式）

通过调用 React.createRef() 来创建一个 ref 的容器，

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<script type="text/babel">
	//创建组件
	class Demo extends React.Component{
		/*
			React.createRef调用后可以返回一个容器，该容器可以存储被ref所标识的节点,该容器是“专人专用”的
	    */
		myRef = React.createRef()
		myRef2 = React.createRef()
		//展示左侧输入框的数据
		showData = ()=>{
			alert(this.myRef.current.value);
		}
		//展示右侧输入框的数据
		showData2 = ()=>{
			alert(this.myRef2.current.value);
		}
		render(){
			return(
				<div>
					<input ref={this.myRef} type="text" placeholder="点击按钮提示数据"/>&nbsp;
					<button onClick={this.showData}>点我提示左侧的数据</button>&nbsp;
					<input onBlur={this.showData2} ref={this.myRef2} type="text" placeholder="失去焦点提示数据"/>&nbsp;
				</div>
			)
		}
	}
	//渲染组件到页面
	ReactDOM.render(<Demo a="1" b="2"/>,document.getElementById('test'))
</script>

事件处理

1
2
3
4
(1).通过onXxx属性指定事件处理函数(注意大小写)
	a.React使用的是自定义(合成)事件, 而不是使用的原生DOM事件 —————— 为了更好的兼容性
	b.React中的事件是通过事件委托方式处理的(委托给组件最外层的元素) ————————为了更高效
(2).通过event.target得到发生事件的DOM元素对象 ——————————不要过度使用ref

非受控组件 & 受控组件

包含表单的组件会分类为

  • 非受控组件：输入类的 dom （比方说 input、checkbox、radio 等）是现用现取的
  • 受控组件（推荐使用）：输入类的 dom，通过 state 维护，使用的时候从 state 中获取，（类似vue 中的 v-model）

其中非受控组件的例子如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script type="text/babel">
	//创建组件
	class Login extends React.Component{
		handleSubmit = (event)=>{
			event.preventDefault() //阻止表单提交
			const {username,password} = this
			alert(`你输入的用户名是：${username.value},你输入的密码是：${password.value}`)
		}
		render(){
			return(
				<form onSubmit={this.handleSubmit}>
					用户名：<input ref={c => this.username = c} type="text" name="username"/>
					密码：<input ref={c => this.password = c} type="password" name="password"/>
					<button>登录</button>
				</form>
			)
		}
	}
	//渲染组件
	ReactDOM.render(<Login/>,document.getElementById('test'))
</script>

event.preventDefault() // 阻止表单提交，阻止一些默认的行为

受控组件的例子如下：

在这里插入图片描述

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<script type="text/babel">
	class Demo extends React.Component {
		state = {
			username: "",
			password: "",
		};

		setUserName = (e) => {
			this.setState({
				username: e.target.value,
			});
		};

		setPassword = (e) => {
			this.setState({
				password: e.target.value,
			});
		};

		handleSubmit = (e) => {
			e.preventDefault();
			const { username, password } = this.state;
			alert(`${username}, ${password}`);
		};

		render() {
			return (
				<form action="" onSubmit={this.handleSubmit}>
					用户名：
					<input type="text" onChange={this.setUserName} name="username" />
					密码：
					<input
						type="password"
						onChange={this.setPassword}
						name="password"
					/>
					<button>登录</button>
				</form>
			);
		}
	}
	ReactDOM.render(<Demo />, document.querySelector("#test"));
</script>

高阶函数 & 函数柯里化

问题场景：
还是上面的例子，如果我想通过受控组件，维护多个 Form 的字段
比方说，我们是注册组件，需要保存用户名，密码，确认密码，性别，地址等等多字段
我们不可能写多个 save 函数为每一个字段去做状态的保存，而是通过统一的函数去做状态的保存

下面的截图中 saveFormData 就是高阶函数
在这里插入图片描述

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
//#region
// region 是为了注释的折叠，在编译器中如果发现代码这点不了的时候，可以添加这个
/* 
			函数的柯里化：通过函数调用继续返回函数的方式，实现多次接收参数最后统一处理的函数编码形式。 
				function sum(a){
					return(b)=>{
						return (c)=>{
							return a+b+c
						}
					}
				}
			*/
//#endregion
//创建组件
class Login extends React.Component {
  //初始化状态
  state = {
    username: "", //用户名
    password: "", //密码
  };

  //保存表单数据到状态中
  saveFormData = (dataType) => {
    return (event) => {
      this.setState({ [dataType]: event.target.value });
    };
  };

  //表单提交的回调
  handleSubmit = (event) => {
    event.preventDefault(); //阻止表单提交
    const { username, password } = this.state;
    alert(`你输入的用户名是：${username},你输入的密码是：${password}`);
  };
  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        用户名：
        <input
          onChange={this.saveFormData("username")}
          type="text"
          name="username"
        />
        密码：
        <input
          onChange={this.saveFormData("password")}
          type="password"
          name="password"
        />
        <button>登录</button>
      </form>
    );
  }
}
// 渲染组件
ReactDOM.render(<Login />, document.getElementById("test"));

高阶函数

高阶函数：如果一个函数符合下面 2 个规范中的任何一个，那该函数就是高阶函数。

  1. 若 A 函数，接收的参数是一个函数，那么 A 就可以称之为高阶函数。
  2. 若 A 函数，调用的返回值依然是一个函数，那么 A 就可以称之为高阶函数。

常见的高阶函数有：Promise、setTimeout、arr.map()等等

函数柯里化

函数的柯里化：通过函数调用继续返回函数的方式，实现多次接收参数最后统一处理的函数编码形式。 （注意对统一处理的理解）

1
2
3
4
5
6
7
function sum(a) {
  return (b) => {
    return (c) => {
      return a + b + c;
    };
  };
}

不用函数柯里化的写法

在这里插入图片描述

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<script type="text/babel">
	//创建组件
	class Login extends React.Component{
		//初始化状态
		state = {
			username:'', //用户名
			password:'' //密码
		}

		//保存表单数据到状态中
		saveFormData = (dataType,event)=>{
			this.setState({[dataType]:event.target.value})
		}

		//表单提交的回调
		handleSubmit = (event)=>{
			event.preventDefault() //阻止表单提交
			const {username,password} = this.state
			alert(`你输入的用户名是：${username},你输入的密码是：${password}`)
		}
		render(){
			return(
				<form onSubmit={this.handleSubmit}>
					用户名：<input onChange={event => this.saveFormData('username',event) } type="text" name="username"/>
					密码：<input onChange={event => this.saveFormData('password',event) } type="password" name="password"/>
					<button>登录</button>
				</form>
			)
		}
	}
	//渲染组件
	ReactDOM.render(<Login/>,document.getElementById('test'))
</script>