React组件与Props深度解析-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_43503511/article/details/120473150

本文探讨了React组件的基本概念，包括组件作为视图片段的角色，以及如何管理内部state和外部props。区分了属性props（只读）和状态state（可读写）。详细介绍了组件的渲染过程，从React调用组件到生成真实DOM。此外，还讨论了组件调用规范，如使用props在类组件中的应用，以及如何在函数组件中利用hooks避免使用class。最后提到了使用展开运算符的场景。

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

一些概念

组件：视图的片段、内部管理数据集合（state）外部传入配置结合（props）
包含： 1. 视图标记（React的JSX、Vue的template）需要经过转换而成为真实的DOM
1. 事件
1. 数据
1. 逻辑（存储storage、数据结构化处理）
1. 外部的配置

属性props和数据/状态state的区别

state → 数据池组件内部的管理数据的容器组件内部可读写
props → 属性池外部调用组件时传入的属性集合组件内容只读不可写

组件渲染过程

React主动调用Mytitle自定义组件
将属性集合转换对象 props → { title: 'xxx'}
将对象作为props传入组件
替换JSX中的props或者state中的变量
ReactDOM将最终的React元素通过一系列操作转换成真实DOM进行渲染

组件调用规范

视图标记：HTML标签 <h1></h1>
大驼峰写法作为一个React元素 <Mytitle />组件 → JSX → React元素
组件转换React元素 React.createElement参考下面代码

使用props（类组件）

class Mytitle extends React.Component {
    constructor(props) {
        super(props)
    }
    state = {
        title: this.props.title
    }
    changeTitle() {
        this.setState({
            title: 'new title'
        })
    }
    render() {
        return (
            <div>
                <h1>{this.state.title}</h1>
                <button onClick={this.changeTitle.bind(this)}>修改</button>
            </div>
        )
    }
}
ReactDOM.render(
    <Mytitle title="init title" />,
    document.getElementById('app')
)

使用hooks（函数组件，不写class了）

函数组件一定要是一个纯函数（入参不可修改，能保证绝对的复用性）
注意onClick绑定的不是函数执行setTitle('new title')，而应该是一个匿名函数
或者用bind返回一个函数

function Mytitle(props) {
    const [title, setTitle] = React.useState(props.title)
    return (
        <div>
            <h1>{title}</h1>
            <button onClick={() => setTitle('new title')}>修改</button>
            // or
            // <button onClick={setTitle.bind(this, 'new title')}>修改</button>
        </div>
    )
}
ReactDOM.render(
    <Mytitle title="init title" />,
    document.getElementById('app')
)
// or不写jsx
// ReactDOM.render(
//     React.createElement(Mytitle, {
//         title: 'init title'
//     }),
//     document.getElementById('app')
// )

使用展开运算符

// 省略
state = {
	title: 'title',
	author: 'author'
}
render(){
	return (
		<Title {...this.state }/>
	)
}
// 相当于 <Title title="this.state.title" author="this.state.author" />