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>
相关推荐
mCell40 分钟前
从 TodoList 到 Microsoft To Do：全栈工程师到底要管什么？
前端·编程语言·全栈
阳光是sunny41 分钟前
LangGraph实战教程：状态管理与`graph.invoke`入参深度解析
前端·人工智能·后端
神奇小汤圆1 小时前
深入解析 Flink Kafka Connector：原理、配置与最佳实践
前端·后端
科技之门1 小时前
百公里管网漏损分级定位实战方案2026
前端·人工智能·算法
xyphf_和派孔明1 小时前
企业级微前端项目完整创建步骤，第三步：配置 Vue 子应用
前端·javascript
自强的小白1 小时前
条件查询或查询全部时时前端请求数据等时间格式
前端
阳光是sunny2 小时前
LangGraph实战教程：一文搞懂图的状态（State）管理
前端·人工智能·后端
whyfail2 小时前
前端学 Spring Boot（5）：从“你是谁”到“服务真的上线了”
前端·spring boot·后端
程序员黑豆2 小时前
鸿蒙开发：RelativeContainer相对布局组件实战——实现5个文本组件对齐
前端·华为·harmonyos
环境栈笔记3 小时前
高性价比指纹浏览器推荐与选型：如何对照价格和实际可用功能筛选候选
前端·人工智能·后端·自动化
热门推荐
01如何新建文件夹？ 电脑新建文件夹的4种方法02GitHub 镜像站点032026年7月AI圈大地震：GPT-5.6被政府限制、Claude入驻Slack、Anthropic自研芯片04AI科技热点日报 | 2026年07月01日05国内可直接用、免费额度/永久免费的大模型API清单（含 SiliconFlow、火山、阿里、智谱、百度、Kimi、DeepSeek、DMXAPI 等）06AI 编程 IDE 全景解析 2026：Agent 全面接管开发链路07幻兽帕鲁 - 服务器管理员权限与 GM 命令完全指南082026 国产 AI 大模型横评：DeepSeek、通义千问、Kimi、文心一言、星火、豆包谁更能打？09微信历史版本含下载地址（ Windows PC | 安卓 | MAC ）及设置微信不更新102026 年 AI 大模型 & AI 编程工具实战全总结