React面向组件编程（上）

程序员--韩同学

已于 2023-03-29 20:25:57 修改

阅读量1.6k

点赞数 8

分类专栏： react 文章标签： react.js javascript 前端

于 2023-03-29 20:22:14 首次发布

本文链接：https://blog.csdn.net/m0_60970928/article/details/129843623

版权

本文介绍了React组件的基础和三大核心属性：state、props和refs。state是组件的状态，变化时触发视图更新；props用于接收外部数据，遵循单向数据流；refs提供访问DOM节点的方式，用于在数据流之外操作组件。文中详细讲解了它们的使用及注意事项，并推荐使用React.createRef()创建ref。

摘要由CSDN通过智能技术生成

前言：

React组件中默认封装了很多属性，有的是提供给开发者操作的，其中有三个属性非常重要：state、props、refs。通过这三大核心属性的使用，我们能够实现对组件的状态进行更新。

一，组件的基本理解和使用

1. 函数组件

 <script type="text/babel">
        function MyComponent() {
     
            return <h2>我是函数定义的组件(适用于简单组件的定义)</h2>
        }
        ReactDOM.render(<MyComponent />, document.getElementById('test'))
    </script>

函数组件的渲染过程

 1.React解析了组件标签，找到了对应的组件
 2.发现这个组件是一个函数定义的，随后调用该函数，生成一个虚拟dom
 3.最后将虚拟dom转化成为真实dom，呈现在页面中

2. 类式组件

<script type="text/babel">
        class MyComponent extends React.Component {
   
            render() {
   
                return <h2>我是类定义的组件适用于复杂数据类型</h2>
            }
        }
        ReactDOM.render(<MyComponent />, document.getElementById('test'))
    </script>

类式组件的渲染过程

1.React解析了组件标签，找到了对应的组件
2.发现这个组件是一个类定义的，随后new出来一个实例对象，并通过该实例调用原型上的render方法
3.将render()返回的内容生成一个虚拟dom
4.最后将虚拟dom转化成为真实dom，呈现在页面中

3.组件的注意事项

组件名必须首字母大写
虚拟DOM元素只能有一个根元素
虚拟DOM元素必须有结束标签

二，组件的三大核心属性

1.state

state 是一个对象，它包含组件的数据状态，当状态变化时，会触发视图的更新。你可以理解它的作用跟 Vue 中的 data 对象类似。

<script type="text/babel">
        class Weather extends React.Component {
   
            constructor() {
   
                super()
                this.state = {
   
                    isHot: false,
                    wind: '微风'
                }
                this.chang = this.chang.bind(this)
            }
            render() {
   
                let {
    isHot, wind } = this.state
                return <h2 onClick={
   this.chang}>今天的天气很 {
   isHot ? "炎热" : "凉爽"},{
   wind}</h2>
            }hang() {
   
                console.log(this)
                this.setState({
   
                    isHot: !this.state.isHot
                })
            }
        }
        ReactDOM.render(<Weather />,