React 初探 [二] React 组件的基本使用 和 组件三大属性

最新推荐文章于 2023-05-09 17:47:13 发布
最新推荐文章于 2023-05-09 17:47:13 发布
阅读量221 收藏
点赞数
分类专栏： web 前端 react 文章标签： react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Sandy_zhi/article/details/107749104
版权

组件化编程是React 和 Vue 框架共同的思想，只是在实现上有些区别，组件化编程的优点不用多说，可以复用，可以简化代码，更能体现封装的思想等。这篇文章主要是定义结合代码分享React组件的基本使用和组件三大属性。

组件基本定义和使用

组件定义

React 组件的定义有两种方式，分别是 工厂函数组件（简单组件）；ES6 类组件（复杂组件==》可以操作state）

使用

使用分主要两步，定义组件 ====》 渲染组件标签

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>组件的基本定义和使用</title>
</head>

<body>
  <div id="example1"></div>
  <div id="example2"></div>
  <script type="text/javascript" src="./js/babel.min.js"></script>
  <script type="text/javascript" src="./js/react.development.js"></script>
  <script type="text/javascript" src="./js/react-dom.development.js"></script>

  <script type="text/babel">
    // 组件化编程  基本组件定义和使用   组件三大属性  组件组合使用  组件生命周期
    //1、定义组件
    /* 方式1 工厂函数组件 简单组件  组件有状态就不能用工厂模式*/
    function MyComponent(){
      return <h2>工厂函数组件(简单组件)</h2>
    }
    /* 方式2 ES6 类组件(复杂组件)*/
    class MyCompinent2 extends React.Component{
      render(){
        console.log(this)
        return <h2>ES6 类组件(复杂组件)</h2> 
      }
    }

  // 2、 渲染组件标签
  ReactDOM.render(<MyComponent/>,document.getElementById('example1'))
  ReactDOM.render(<MyCompinent2/>,document.getElementById('example2'))

  </script>
</body>

</html>

定义组件注意：

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

render()渲染组件标签的基本流程

  1. React 会创建组件实例对象
  2. 得到包含的虚拟DOM 并解析为真实DOM 
  3. 插入到指定的页面元素内部

最后看一下组件对象长什么样，每个组件都包含了 state props refs 属性 ，如下展示的就是默认值

三大属性之 state

基本理解：

state 是React 组件对象最重要的属性，state本身是对象，可以包含很多数据，是统一数据管理的对象，React中改变DOM 渲染内容是通过改变数据来的，而数据时通过state 管理的 ，因此要操作state，数据处理比vue 对 state 的依赖大。

一般步骤：

  1. 初始化状态 ===》一般在constructor 中 初始化
  2. 读取状态===》在render() 函数中读取
  3. 更新状态===》一般在事件处理函数中

codding

<!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='example'></div>

  <script type="text/javascript" src="./js/babel.min.js"></script>
  <script type="text/javascript" src="./js/react.development.js"></script>
  <script type="text/javascript" src="./js/react-dom.development.js"></script>

  <script type="text/babel">
    /*
  需求：自定义组件 功能说明如下
  1、显示h2 标题 初始文本为 你喜欢我
  2、点击标题更新为：我喜欢你
  */
  // 1、 定义组件
    class Like extends React.Component{
      constructor(props){
        super(props)
        // 初始化状态
        this.state = {
          isLikeMe : false
        }
        // 将新增方法中的this 强制绑定为组件对象
       this.handleClick =  this.handleClick.bind(this)
      }
      // 新增加的方法：内部的this 默认不是组件对象 而是undefined 
      handleClick(){
        // console.log(this)
        // 更新状态    
        const isLikeMe = !this.state.isLikeMe
        this.setState({isLikeMe})
      }
      // 重写组件类的方法
      render(){
        // 读取状态
        const {isLikeMe}  = this.state
        return <h2 onClick={this.handleClick}>{isLikeMe ? '你喜欢我':'我喜欢你'}</h2>
      }
    }
  // 2、渲染组件
    ReactDOM.render(<Like/>,document.getElementById('example'))
  </script>
</body>

</html>

注意

自定义组件新增的函数如 handleClick( 非重写的函数) 默认 this 是 undefined ，如果想在此函数中使用组件对象this ,则需要借助bind。

三大属性之 props

基本理解

props 是组件对象包含的自定义属性的集合对象，每个组件都会有，自定义属性都含在其中，可以通过标签属性从组件外向组件内传值，因此组件内不要修改props 数据，要在组件外修改后传入，也可以更好的复用。

codding

<!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='example1'></div>
  <div id='example2'></div>

  <script type="text/javascript" src="./js/react.development.js"></script>
  <script type="text/javascript" src="./js/react-dom.development.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.6.0/prop-types.js"></script>
  <script type="text/javascript" src="./js/babel.min.js"></script>

  <script type="text/babel">
    // 需求: 自定义用来显示一个人员信息的组件
    //   1). 姓名必须指定
    //   2). 如果性别没有指定, 默认为男
    //   3). 如果年龄没有指定, 默认为18

    // 1、定义组件
    // function Person (props){
    //   return (
    //     <ul>
    //     <li>姓名：{props.name}</li>
    //     <li>年龄：{props.age}</li>
    //     <li>性别：{props.sex}</li>
    //     </ul>
    //   )
    // }
      
      class Person extends React.Component{
        render(){
          return (
            <ul>
              <li>姓名：{this.props.name}</li>
              <li>年龄：{this.props.age}</li>
              <li>性别：{this.props.sex}</li>
            </ul>
          )
        }
      }

    // 指定属性默认值
    Person.defaultProps = {
      sex:'男',
      age:18
    }
    Person.propTypes = {
      name:PropTypes.string.isRequired,
      age:PropTypes.number
    }
    // 2、 渲染组件标签
    const p1 ={
      name:'TOM',
      age:16,
      sex:'女'
    }
    // ReactDOM.render(<Person name={p1.name} age={p1.age} sex = {p1.sex}/>,document.getElementById('example1'))
    ReactDOM.render(<Person {...p1}/>,document.getElementById('example1'))

    const p2 ={
      name:'JACK'
    }
    ReactDOM.render(<Person name={p2.name} age={20}/>,document.getElementById('example2'))
  </script>
</body>

</html>

补充：React props 属性传值，和 vue 类似，都是可以设置默认值 以及 规定数据类型  可以通过扩展属性传值  api 可参考如上代码。

三大属性之 refs 

基本理解

React refs 属性和 vue 中的是一样的，是用来标识组件用的，向自定义属性的id 一样， 虽然vue 在后 但是没办法 转行之后先学的 vue ,React 学起来有点繁琐，但是应该有其致胜之处，听说很多大项目都是用React 框架。

demo

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>组件三大属性之 refs</title>
</head>

<body>
  <div id='example'></div>
  <div id='example2'></div>

  <script type="text/javascript" src="./js/react.development.js"></script>
  <script type="text/javascript" src="./js/react-dom.development.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.6.0/prop-types.js"></script>
  <script type="text/javascript" src="./js/babel.min.js"></script>

  <script type="text/babel">
    // 需求: 自定义组件, 功能说明如下:
  // 2. 点击按钮, 提示第一个输入框中的值
  // 3. 当第2个输入框失去焦点时, 提示这个输入框中的值


  // 理解
//   1)	组件内的标签都可以定义ref属性来标识自己
// a.	<input type="text" ref={input => this.msgInput = input}/>
// b.	回调函数在组件初始化渲染完或卸载时自动调用
// 2)	在组件中可以通过this.msgInput来得到对应的真实DOM元素
// 3)	作用: 通过ref获取组件内容特定标签对象, 进行读取其相关数据


// 定义组件
class MyComponent extends React.Component{
constructor(props){
super(props)
this.showInput = this.showInput.bind(this)
this.handleBlur = this.handleBlur.bind(this)
}
 render() {
   return (
     <div>
      <input type="text" ref='content'/>&nbsp;&nbsp;
      <input type="text" ref={input=>this.input=input}/>&nbsp;&nbsp;
      <button onClick={this.showInput}>提示输入</button>&nbsp;&nbsp;
      <input type="text" placeholder='失去焦点提示内容' onBlur={this.handleBlur}/>
    </div>
   )
 }
 showInput(){
  const input = this.refs.content
  // alert(input.value)
  alert(this.input.value)
}
handleBlur(e){
alert(e.target.value)
}
}

// 渲染组件标签
ReactDOM.render(<MyComponent/> ,document.getElementById('example'))
  </script>
</body>

</html>

看代码中，ref 的定义有两种  ：

  •     <input type="text" ref='content'/>     
  •     <input type="text" ref={input=>this.input=input}/>

 

到此了解了React 组件的基本使用，和 组件的三大属性 state props refs ,基本使用每个属性的使用都有一个小的demo 需求，此篇博客用于自己的学习记录，如果有初学者向了解一下也可以参考希望自己的记录梳理有帮助。

小智大愚
关注
专栏目录
Day2：react组件初探
weixin_44618120的博客
04-11 247
本章内容主要介绍了react组件，以及组件的两种数据，prop和state。
为什么要在函数组件中使用React.memo？
weixin_42686892的博客
01-15 1251
这里提一下，如果大家看到这个标题有所疑惑的话，可以花点时间看一下本篇文章。反之呢如果是看到标题第一时间就反映出结论的话，就可以去get其他文章的知识点了 那么接下来就不废话了，直接长刀直入，进入正题！ 初探memo 首先让我们用一个例子走进React.memo的世界 呆呆的函数组件 - 没有使用memo 对于一个函数组件来说，如果没有使用React.memo就好比是一个人没有脑子，就笨笨的呆呆的 不信我们就来看下面的Demo 点击访问演示Demo 让我们来分析下上图发生的流程：.
React 组件三大核心属性
weixin_43190804的博客
04-13 983
1: state 1.state是组件对象最重要的属性, 值是对象(可以包含多个key-value的组合) 2.组件被称为"状态机", 通过更新组件的state来更新对应的页面显示(重新渲染组件) 注意: 1.组件中render方法中的this为组件实例对象 2.组件自定义的方法中this为undefined，如何解决？ a)强制绑定this: 通过函数对象的bind() b)箭头函数 3.状态数据，不能直接修改或更新,需要用setState ...
从零开始学习React：了解组件的三大属性
Junerver的博客
05-22 532
从零开始学习React：了解当前React常用技术，编写第一个React组件 从零开始学习React：了解组件的三大属性 上一节我们简单介绍了React的相关技术栈，以及如何在一个 html 文件中使用 React，创建一个React 组件并渲染到Html 中。 本节我们来介绍在 React 中 一个组件比较重要的三大属性 组件三大属性 就如我们上一节中介绍的一个最简单的函数式组件是这样的： const H2 = ({ title }) => <h2>{title}</h2&gt
[vue]国际化功能的实现
前端
04-22 3961
[vue]国际化功能的实现 通过语言的选择，使得网页展示内容为对应的语言 UI组件使用的是ant-design-vue，直接使用它的国际化组件，用于实现ant-design-vue各组件的国际化； 第一次实现国际化的功能时直接使用了 ant-design-vue的国际化组件，标签没有起作用 在真正的使用过程中绕了很多弯路，这里记录一下，方便以后查找 环境： "vue": "^3.0.0" "ant-design-vue": "^3.1.0-rc.5" ant-design-vue的国际化 这个主要是引入
vue 中文 全局化配置
weixin_45322373的博客
05-03 2077
Vue.app <template> <!-- 中文化 --> <a-config-provider :locale="zhCN"> <router-view></router-view><!-- 路由视图，动态加载路由对应界面 --> </a-config-provider> </template> <script> import { Modal } from 'ant-desig.
ant-design-vue之中＜a-table＞标签自带的分页如何变为中文
最新发布
wsdnnnnnnnnn的博客
05-09 2059
a-table :pagination="pagination">自带的分页器默认语言是英文，但是需求需要变为中文，需要使用a-config-provider标签来将分页器变为中文。
ReactNative初探
01-27
React Native 初探意味着我们将探索这个框架的基本概念、优势和挑战，以及如何开始构建一个简单的RN应用。 React Native的核心理念是“Learn once, write anywhere”，这意味着开发者可以使用相同的JavaScript和...
初探React：组件、状态和属性
# 1. React入门介绍 React（也称为React.js或ReactJS），是一个由Facebook开发的用于构建用户...- **组件化开发**：React将界面分解成多个独立的组件，每个组件负责一部分界面内容，便于维护和复用。 - **虚拟DOM**：R
理解React组件：初探React框架的基本组成
理解React框架的基本概念 在深入学习React框架之前，我们首先需要理解React框架的基本概念。React是一个由Facebook开发的用于构建用户界面的JavaScript库，它采用组件化的思想，可以轻松构建交互式的用户界面。...
antDesign for vue组件中文配置
Renners的博客
07-29 1488
刚开始的时候只文档没看全，只关注到js部分的内容，并不看到html部分也需要做配置，导致配置一直没生效，后面查过很多方法都只做了js部分的介绍，并没有对html组件部分进行说明，因此问题一致没有得到解决，后面还按照网上的方法引入了moment，并没有作用，因此总结起来没事多看文档，真的可以避免很多的坑。最后需要将组件包裹起来将组件包裹起来即完成了组件汉化。在app.vue文件中引入。...
七：以理论结合实践方式梳理前端 React 框架 ——— React 状态管理
味十三
03-24 1044
React 状态管理
React实现Todolist
csdn_zsdf的博客
03-15 9697
一个todolist基本的功能点包括： 点击复选框标记完成或者未完成，且相应的文字出现删除线 从列表中移除item 添加item 首先它是由todolist title 、todolist、和addtodo三部分组成。由于todolist title 和addtodo比较简单，在这里只将todolist拆分成组件。 创建一个ListItem组件。含有一个render方法 class List...
React 怎么用组件实现一个简单的todo list
aysfbctcu511961230的博客
07-20 112
Handle(添加组件) import React, { Component } from 'react'; class Handle extends Component { state = { inputVal: '' } render(){ let {inputVal} = this.s...
React-组件三大核心属性: state、props、refs
weixin_53412458的博客
02-28 1254
1、state state是组件对象最重要的属性, 值是对象.React 把组件看成是一个状态机（State Machines）。通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面（不要操作 DOM）。 例子： //1.创建组件 class Weather extends React.Component{ //初始化状态 state = {isHot:false,wind:'微风'
实现前端页面局部转 pdf 及 打印 加分页防止内容截断
Sandy_zhi的博客
09-01 9733
再次强调实践出真知，新项目迭代涉及到一个管理报告的下载及打印，但是项目中以往的这种功能实现主要核心在后端，如pdf 的生成，打印也是有现成的文件地址等，但这次的报告中内容比较复杂，有表格，有几个echars 数据，以及长篇的描述，后端表示这个由后端生成pdf 不太现实，因此主要任务就留在了前端。 核心库 html2Canvas jspdf print-js 实现思路 1、html2Canvas可以将特定容器标签的内容转换为图片，通过特定API 转换为对应的base64 格式的数据 ...
Node 简单搭建服务器
Sandy_zhi的博客
07-18 5888
作为前端开发能自己动手搭建一个本地服务器真的太有必要了。使用 node 内置模块 和 express 框架 来动手搭建一个简单的服务吧。
自定义穿梭框实现详解 table 穿梭框
Sandy_zhi的博客
03-03 5271
业精于勤 荒于嬉 需求： element 的 穿梭框el-transfer 使用起来样式很受限制，一般我们需要根据自己的需求实现数据的灵活选择，左右穿梭，就需要用到自定义的穿梭框了 思路： 封装自定义的穿梭框，要考虑的是自己的需求样式，以及数据展示格式 A：什么样式？ Q：穿梭框样式，一般分为左右两侧，此处不多说，根据自己的 UI 画页面就可以了 A：展示的数据格式？ Q : 主要是根据自己的页面展示，分析自己需要的是什么样的数据， A : 其他逻辑功能分析？ Q：你需求的穿梭框需..
Echarts 类似进度条样式 Label 设置在柱状图的顶端外侧
Sandy_zhi的博客
11-03 3861
最近项目中写一个大屏演示，里面多数是Echars 图表，因为大多数都需要自己设置一些特性，才能达到效果，因此好好读了Echars 的文档，尤其是配置项。 效果图 思路 左图 其中左侧是看到的一篇文章 https://blog.csdn.net/qq_41619796/article/details/88661612，类似进度条的样式，思路是echars 两个部分叠加，但时看了我们项目的效果图不太可以，因为项目效果图整个有效数据和背景部分都是有圆角的，这样两部分的连接处就会有问题。 右图 .
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值