React面向组件编程（定义组件，组件三大核心属性，组件事件处理、组件收集表单数据、高阶函数和函数的柯里化）

最新推荐文章于 2024-06-24 14:51:36 发布

枕頭說他不想醒

最新推荐文章于 2024-06-24 14:51:36 发布

阅读量1.5k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： React 文章标签： react.js 前端前端框架

本文链接：https://blog.youkuaiyun.com/weixin_52984349/article/details/127575088

本文详细探讨了React中的组件定义，包括函数式组件和类式组件的使用。接着介绍了组件的三大核心属性——State、Props和Ref，阐述它们的作用和用法。此外，还讲解了组件事件处理、表单数据的受控和非受控组件管理，以及高阶函数和柯里化的概念及其在React中的应用。通过实例代码，帮助读者深入理解React开发中的关键概念。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、组件三大核心属性1: State(状态)

一、React中定义组件

1、函数式组件

（1）实质：一个 React 应用就是构建在 React 组件之上的。

（2）函数组件：该函数是一个有效的 React 组件，因为它接收唯一带有数据的 “props”（代表属性）对象与并返回一个 React 元素。这类组件被称为“函数组件”，因为它本质上就是 JavaScript 函数。

（3）代码展示如下

<!-- 准备好一个“容器” -->
	<div id="test"></div>
	
	<!-- 引入react核心库 -->
	<script type="text/javascript" src="../js/react.development.js"></script>
	<!-- 引入react-dom，用于支持react操作DOM -->
	<script type="text/javascript" src="../js/react-dom.development.js"></script>
	<!-- 引入babel，用于将jsx转为js -->
	<script type="text/javascript" src="../js/babel.min.js"></script>

	<script type="text/babel">
		//1.创建函数式组件
		function MyComponent(){
			console.log(this); //此处的this是undefined，因为babel编译后开启了严格模式
			return <h2>我是用函数定义的组件(适用于【简单组件】的定义)</h2>
		}
		//2.渲染组件到页面
		ReactDOM.render(<MyComponent/>,document.getElementById('test'))
	</script>

（4）注意：

1.组件名必须首字母大写

2.虚拟DOM元素只能有一个根元素

3.虚拟DOM元素必须有结束标签

4.函数名就是组件名

2、类式组件

（1）含义：

ES6 的 class 来定义组件，通过继承React.Component。解析流程如下：

React解析组件标签，找到了MyComponent组件。

发现组件是使用类定义的，随后new出来该类的实例，并通过该实例调用到原型上的render方法。将render返回的虚拟DOM转为真实DOM，随后呈现在页面中。

（2）代码展示

<!-- 准备好一个“容器” -->
	<div id="test"></div>
	<!-- 引入react核心库 -->
	<script type="text/javascript" src="../js/react.development.js"></script>
	<!-- 引入react-dom，用于支持react操作DOM -->
	<script type="text/javascript" src="../js/react-dom.development.js"></script>
	<!-- 引入babel，用于将jsx转为js -->
	<script type="text/javascript" src="../js/babel.min.js"></script>

	<script type="text/babel">
		class MyComponent extends React.Component {
			render(){
				return <h2>我是用类定义的组件(适用于[复杂组件]的定义)</h2>
			}
		}
		//2.渲染组件到页面
		ReactDOM.render(<MyComponent/>,document.getElementById('test'))
	</script>

（3）注意：

1.组件名必须首字母大写

2.虚拟DOM元素只能有一个根元素

3.虚拟DOM元素必须有结束标签

4.类名就是组件名

二、组件三大核心属性

1、组件三大核心属性1: State(状态)

1.1什么是state

state是组件对象最重要的属性,值是对象(可以包含多个key:value的组合)，组件被称为`状态机`,通过更新组件的state来更新对应的页面显示(重新渲染组件)，有state称为复杂组件。

1.2 State的用法

State 的使用对象形式(key,value);

代码演示：

 <div id="root"></div>
    <script src="../react.development.js"></script>
    <script src="../react-dom.development.js"></script>
    <script src="../babel.min.js"></script>
    <script type="text/babel">
        class Flag extends React.Component{
            state={
                isflag : false,
            }
            changeFlag=()=>{
                let {isflag,count}= this.state;
                this.setState({isflag:!isflag,count:++count})
                console.log(this.state.isflag);
            }
    
            render() {
                let {isflag,count}= this.state;
                return (
                  <div>
                    <button className={isflag?"yes":"no"}>
                    {isflag?"已关注":"未关注"}                            
                    </button>
                  </div>