首页 > 其他分享 >React组件之间的通信方式总结(下)

React组件之间的通信方式总结(下)

时间:2022-10-19 08:56:32浏览次数:45  
标签:总结 react render React state props 组件

一、写一个时钟

  • 用 react 写一个每秒都可以更新一次的时钟
import React from 'react'
import ReactDOM from 'react-dom'


function tick() {
    let ele = <h1>{ new Date().toLocaleTimeString() }</h1>

    // Objects are not valid as a React child (found: Sun Aug 04 2019 20:34:51 GMT+0800 (中国标准时间)). If you meant to render a collection of children, use an array instead.
    // new Date() 是一个对象数据类型的值,React 元素不接收对象作为其子元素
    ReactDOM.render(ele, document.querySelector('#root'))
}

tick()

setInterval(tick, 1000) // 如果不包在一个函数中,时钟是不会每秒更新一次

但是 React 和 Vue 相同都是数据驱动的,但是这个时候和数据驱动没啥关系,每隔1秒钟重新创建一个 ele,然后再渲染到页面中,视图才发生变化;为了使用数据驱动,我们需要使用 React 的组件

二、React 的组件

在 React 组件中,jsx 元素(也称 react 元素)是组件的基本组成单位
在 react 中定义组件有两种方式:

  1. 函数(function)定义组件
  2. 类(class)定义组件
  • 定义组件的要求:
    1. 组件的名字首字母必须大写,为了在写 jsx 时区分原生 html 标签
    1. 组件定义后,就可以当做一个标签在 jsx 语法中使用
    1. 如果使用函数定义组件必须返回一个 jsx 元素

2.1 React 的函数组件

react 使用函数定义组件,就是声明一个函数;

  • 函数接收一个 props 参数;props 是对象,是在渲染或者父组件通过 prop(属性) 传递过来的数据;
  • 函数返回一个 jsx 元素,在组件中需要的数据可以通过 props 传入;
// 1. 函数定义组件
function Welcome(props) {
    // props 是一个对象,是使用组件时,写在组件行内的属性和属性值组成的;
    console.log(data)
    return (<div>
        <p>{props.data.name}; {props.data.age}</p>
        <p>{props.x}</p>
    </div>)
}

ReactDOM.render(<Welcome data={{name: 'mabin', age: 18}} x='hahah' />, document.querySelector('#root'));
  • ReactDOM.render() 会根据第一个参数的类型不同执行不同的操作;
    1. 如果是组件,当 render 执行时,首先会把当前组件的行内属性进行打包封装,把其封装成一个对象,把这个对象传给组件函数
    1. 执行组件函数,获取对应的虚拟 DOM 对象
    1. 把虚拟 DOM 转成真实 DOM 对象,并且插入到真实的 DOM 中

2.2 React 的 class 组件

通过 class 定义一个组件

  1. 通过 class 来定义一个组件,需要继承 React 上的 Component 这个类
  2. 在定义组件上的原型上必须有一个 render 函数,且 render 函数需要返回一个顶级的 jsx 元素

-看

标签:总结,react,render,React,state,props,组件
From: https://www.cnblogs.com/beifeng1996/p/16804929.html

相关文章

  • React面试八股文(第二期)
    React.forwardRef是什么?它有什么作用?React.forwardRef会创建一个React组件,这个组件能够将其接受的ref属性转发到其组件树下的另一个组件中。这种技术并不常见,但在以下......
  • React组件之间的通信方式总结(上)
    先来几个术语:官方我的说法对应代码ReactelementReact元素letelement=<span>A爆了</span>Component组件classAppextendsReact.Component{}无Ap......
  • Rust语言迭代器使用总结
    1.概览 (转载https://zhuanlan.zhihu.com/p/346583098)本文基于本人使用Rust语言以及刷leetcode每日一题总结的经验。刚开始使用Rust的时候由于其循环语句和Cpp等语言的循......
  • vue3+vite+ts自动引入api和组件
    安装cnpminstallunplugin-auto-importunplugin-vue-components-d配置//自动导入compositionapi和生成全局typescript说明importAutoImportfrom'unplugin-au......
  • react-router-dom(v6)快速上手
    本篇笔记跟随官方教程而写,把其中连续的步骤碎片化,方便以后忘记的时候直接调用,其中包含了对其他小问题的拓展。创建路由(quick-start)npminstallreact-router-dom在R......
  • 2022-10-19 react解析富文本
    <divdangerouslySetInnerHTML={{__html:values.content}}></div>dangerouslySetInnerHTML是react标签的一个属性,后面的__html跟返回的富文本数据。注:使用innerHTML......
  • 工作笔记之 SELECT 语句在 SAP ABAP 中的用法总结(上)
    日常开发过程中,最常用的语句可能就是查询语句了。那么如果从数据库表中查询数据呢?答:​​selectfrom​​语句。SELECT的三个部分在OPENSQL中,​​SELECT​​语句可以查......
  • mui组件导致ios设备无法让input获取焦点
    问题页面使用了mui组件,其中有个input标签。在IOS,macOS设备上无法通过点击让input框获得焦点,导致无法输入。原因mui.css中有个样式,让页面内容无法被选中,影响了input获取......
  • 04.大型数据库应用技术课堂测试05-日志数据分析-错误总结
    错误总结:1.ExpressionnotinGROUPBYkey'id'解决:在groupby子句中,select查询的列,要么需要是groupby中的列,要么得是用聚合函数(比如sum、count等)加工过的列。不......
  • SpringMVC执行流程-3、DispatcherServlet调用组件处理请求
    DispatcherServlet调用组件处理请求a>processRequest()FrameworkServlet重写HttpServlet中的service()和doXxx(),这些方法中调用了processRequest(request,response)所......