React - state、state 的简写方式、props、props 的简写方式、类式组件中的构造器与 props、函数式组件使用 props

我命由我123452026-03-12 19:56

一、state

1、演示
html 复制代码 
<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>state</title>
    </head>

    <body>
        <div id="test"></div>
    </body>

    <script src="../js/react/react.development.js" type="text/javascript"></script>
    <script src="../js/react/react-dom.development.js" type="text/javascript"></script>
    <script src="../js/react/babel.min.js" type="text/javascript"></script>
    <script type="text/babel">
        class Weather extends React.Component {
            constructor(props) {
                super(props);

                console.log("构造器调用了");

                this.state = {
                    isHot: true,
                    wind: "微风",
                };

                this.changeWeather = this.changeWeather.bind(this);
            }

            render() {
                console.log("render 方法调用了");

                return (
                    <h1 id="title" onClick={this.changeWeather}>
                        今天天气很{this.state.isHot ? "炎热" : "凉爽"}，{this.state.wind}
                    </h1>
                );
            }

            changeWeather() {
                console.log("changeWeather 方法调用了");

                this.setState({ isHot: !this.state.isHot });
            }
        }

        ReactDOM.render(<Weather />, document.getElementById("test"));
    </script>
</html>
2、解读
  1. 解决 changeWeather 方法中 this 指向问题
js 复制代码 
this.changeWeather = this.changeWeather.bind(this);
复制代码 
1. 通过 Weather 实例调用 changeWeather 方法时，changeWeather 方法中的 this 就是 Weather 实例

2. 由于 changeWeather 方法作为 onClick 的回调，所以不是通过实例调用的，是直接调用

3. 类中的方法默认开启局部的严格模式，所以 changeWeather 方法中的 this 就是 undefined
  1. state 不可以直接更改，需要借助 setState 进行更新，且更新是通过合并方式，不是替换
js 复制代码 
this.setState({ isHot: !this.state.isHot });
  1. 构造器调用 1 次，render 方法调用 1 + n 次（1 是初始化的那次、n 是状态更新的次数），changeWeather 方法点几次调用几次

二、state 的简写方式

html 复制代码 
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>state 的简写方式</title>
	</head>

	<body>
		<div id="test"></div>
	</body>

	<script src="../js/react/react.development.js" type="text/javascript"></script>
	<script src="../js/react/react-dom.development.js" type="text/javascript"></script>
	<script src="../js/react/babel.min.js" type="text/javascript"></script>
	<script type="text/babel">
		class Weather extends React.Component {

            // 初始化状态
			state = {
				isHot: true,
				wind: "微风",
			};

            // 自定义方法，要用赋值语句形式 + 箭头函数
            changeWeather = () => {
                console.log(this);
				this.setState({ isHot: !this.state.isHot });
			}

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

		ReactDOM.render(<Weather />, document.getElementById("test"));
	</script>
</html>

三、props

1、演示
html 复制代码 
<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>props</title>
    </head>

    <body>
        <div id="test1"></div>
        <div id="test2"></div>
        <div id="test3"></div>
    </body>

    <script src="../js/react/react.development.js" type="text/javascript"></script>
    <script src="../js/react/react-dom.development.js" type="text/javascript"></script>
    <script src="../js/react/babel.min.js" type="text/javascript"></script>
    <script type="text/babel">
        class Person extends React.Component {
            render() {
                return (
                    <ul>
                        <li>姓名：{this.props.name}</li>
                        <li>性别：{this.props.sex}</li>
                        <li>年龄：{this.props.age}</li>
                    </ul>
                );
            }
        }

        ReactDOM.render(<Person name="tom" sex="男" age="18" />, document.getElementById("test1"));
        ReactDOM.render(<Person name="jack" sex="男" age="20" />, document.getElementById("test2"));

        const p = {
            name: "smith",
            sex: "男",
            age: "25",
        };
        ReactDOM.render(<Person {...p} />, document.getElementById("test3"));
    </script>
</html>
  • 使用解构赋值
js 复制代码 
class Person extends React.Component {
    render() {
        const { name, sex, age } = this.props;
        return (
            <ul>
                <li>姓名：{name}</li>
                <li>性别：{sex}</li>
                <li>年龄：{age}</li>
            </ul>
        );
    }
}
  • 注：props 是只读的
html 复制代码 
<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>props 限制与注意事项</title>
    </head>

    <body>
        <div id="test1"></div>
        <div id="test2"></div>
    </body>

    <script src="../js/react/react.development.js" type="text/javascript"></script>
    <script src="../js/react/react-dom.development.js" type="text/javascript"></script>
    <script src="../js/react/babel.min.js" type="text/javascript"></script>
    <script src="../js/react/prop-types.js" type="text/javascript"></script>
    <script type="text/babel">
        class Person extends React.Component {
            render() {
                const { name, sex, age } = this.props;
                return (
                    <ul>
                        <li>姓名：{name}</li>
                        <li>性别：{sex}</li>
                        <li>年龄：{age + 1}</li>
                    </ul>
                );
            }
        }

        Person.propTypes = {
            name: PropTypes.string.isRequired,
            sex: PropTypes.string,
            age: PropTypes.number,
            speak: PropTypes.func,
        };

        Person.defaultProps = {
            sex: "男",
            age: 18,
        };

        ReactDOM.render(<Person name="tom" sex="男" age={18} speak={speak} />, document.getElementById("test1"));
        ReactDOM.render(<Person name="jack" age={20} />, document.getElementById("test2"));

        function speak() {
            console.log("我说话了");
        }
    </script>
</html>
  1. 引入 prop-types，用于对组件标签属性进行限制
html 复制代码 
<script src="../js/react/prop-types.js" type="text/javascript"></script>
  1. 对 props 进行类型、必要性的限制
js 复制代码 
Person.propTypes = {
    name: PropTypes.string.isRequired, // 限制 name 必传，且为字符串
    sex: PropTypes.string, // 限制 sex 为字符串
    age: PropTypes.number, // 限制 age 为数值
    speak: PropTypes.func, // 限制 speak 为函数
};
  1. 指定 props 的默认值
js 复制代码 
Person.defaultProps = {
    sex: "男", // 限制 sex 默认值为男
    age: 18, // 限制 age 默认值为 18
};

四、props 的简写方式

html 复制代码 
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>props 的简写方式</title>
	</head>

	<body>
		<div id="test1"></div>
		<div id="test2"></div>
	</body>

	<script src="../js/react/react.development.js" type="text/javascript"></script>
	<script src="../js/react/react-dom.development.js" type="text/javascript"></script>
	<script src="../js/react/babel.min.js" type="text/javascript"></script>
	<script src="../js/react/prop-types.js" type="text/javascript"></script>
	<script type="text/babel">
		class Person extends React.Component {
			render() {
				const { name, sex, age } = this.props;
				return (
					<ul>
						<li>姓名：{name}</li>
						<li>性别：{sex}</li>
						<li>年龄：{age + 1}</li>
					</ul>
				);
			}

			static propTypes = {
				name: PropTypes.string.isRequired, // 限制 name 必传，且为字符串
				sex: PropTypes.string, // 限制 sex 为字符串
				age: PropTypes.number, // 限制 age 为数值
				speak: PropTypes.func, // 限制 speak 为函数
			};

			static defaultProps = {
				sex: "男", // 限制 sex 默认值为男
				age: 18, // 限制 age 默认值为 18
			};
		}

		ReactDOM.render(<Person name="tom" sex="男" age={18} speak={speak} />, document.getElementById("test1"));
		ReactDOM.render(<Person name="jack" age={20} />, document.getElementById("test2"));

		function speak() {
			console.log("我说话了");
		}
	</script>
</html>

五、类式组件中的构造器与 props

1、基本介绍

  1. 如果不想在构造器中通过 this 访问 props，可以不接收 props，不传递给 super（甚至不写构造器）

  2. 如果想要在构造器中通过 this 访问 props，必须要接收 props，并传递给 super

2、演示
html 复制代码 
<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>类式组件中的构造器与 props</title>
    </head>

    <body>
        <div id="test"></div>
    </body>

    <script src="../js/react/react.development.js" type="text/javascript"></script>
    <script src="../js/react/react-dom.development.js" type="text/javascript"></script>
    <script src="../js/react/babel.min.js" type="text/javascript"></script>
    <script src="../js/react/prop-types.js" type="text/javascript"></script>
    <script type="text/babel">
        class Person extends React.Component {
            render() {
                const { name, sex, age } = this.props;
                return (
                    <ul>
                        <li>姓名：{name}</li>
                        <li>性别：{sex}</li>
                        <li>年龄：{age + 1}</li>
                    </ul>
                );
            }

            static propTypes = {
                name: PropTypes.string.isRequired, // 限制 name 必传，且为字符串
                sex: PropTypes.string, // 限制 sex 为字符串
                age: PropTypes.number, // 限制 age 为数值
            };

            static defaultProps = {
                sex: "男", // 限制 sex 默认值为男
                age: 18, // 限制 age 默认值为 18
            };
        }

        ReactDOM.render(<Person name="tom" sex="男" age={18} />, document.getElementById("test"));
    </script>
</html>
  1. 接收 props，传递给 super
js 复制代码 
constructor(props) {
    super(props);
    console.log("constructor", this.props);
}
复制代码 
# 输出结果

constructor {name: 'tom', sex: '男', age: 18}
  1. 不接收 props，不传递给 super
js 复制代码 
constructor() {
    super();
    console.log("constructor", this.props);
}
复制代码 
# 输出结果

constructor undefined
  1. 接收 props，不传递给 super
js 复制代码 
constructor(props) {
    super();
    console.log("constructor", this.props);
}
复制代码 
# 输出结果

constructor undefined

六、函数式组件使用 props

html 复制代码 
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>函数式组件使用 props</title>
	</head>

	<body>
		<div id="test"></div>
	</body>

	<script src="../js/react/react.development.js" type="text/javascript"></script>
	<script src="../js/react/react-dom.development.js" type="text/javascript"></script>
	<script src="../js/react/babel.min.js" type="text/javascript"></script>
	<script src="../js/react/prop-types.js" type="text/javascript"></script>
	<script type="text/babel">
		function Person(props) {
			const { name, sex, age } = props;
			return (
				<ul>
					<li>姓名：{name}</li>
					<li>性别：{sex}</li>
					<li>年龄：{age + 1}</li>
				</ul>
			);
		}

		Person.propTypes = {
			name: PropTypes.string.isRequired,
			sex: PropTypes.string,
			age: PropTypes.number,
		};

		Person.defaultProps = {
			sex: "男",
			age: 18,
		};

		ReactDOM.render(<Person name="tom" sex="男" age={18} />, document.getElementById("test"));
	</script>
</html>
相关推荐
钰衡大师2 小时前
Vue 3 源码学习教程
前端·vue.js·学习
C澒2 小时前
React + TypeScript 编码规范｜统一标准 & 高效维护
前端·react.js·typescript·团队开发·代码规范
时光少年2 小时前
Android 视频分屏性能优化——GLContext共享
前端
IT_陈寒2 小时前
JavaScript开发者必知的5个性能杀手，你踩了几个坑？
前端·人工智能·后端
跟着珅聪学java2 小时前
Electron 精美菜单设计
运维·前端·数据库
日光倾3 小时前
【Vue.js 入门笔记】闭包和对象引用
前端·vue.js·笔记
EstherNi3 小时前
左右两侧定位的效果，vue3
javascript·vue.js
一只程序熊3 小时前
UniappX 未找到 “video“ 组件，已自动当做 “view“ 组件处理。请确保代码正确，或重新生成自定义基座后再试。
前端
林小帅3 小时前
【笔记】xxx 技术分享文档模板
前端
热门推荐
01GitHub 镜像站点02OpenClaw 使用和管理 MCP 完全指南03本地部署 OpenClaw + DeepSeek-R1 完全指南04得物前端部门，没了05OpenClaw 飞书机器人不回复消息？3 小时踩坑总结06OpenClaw 连接飞书完整指南：插件安装、配置与踩坑记录07OpenClaw macOS 完整安装与本地模型配置教程（实战版）08Window 10部署openclaw报错node.exe : npm error code 12809OpenClaw 接入 QQ Bot 完整实践指南10OpenClaw-VSCode：在 VS Code 里玩转 OpenClaw，远程管理+SSH 双剑合璧