🧐React小白自学指南---基础篇，第2篇《JSX语法和组件》下篇

多动症男孩
282 阅读5分钟

前言

React已经成为现代Web开发的热门前端框架之一，越来越多的开发者加入React社区的队伍。但是对于初学者来说，学习一个新的技术框架可能会感到有些困难，特别是如果在没有指导和明确的学习计划的情况下自学。本系列技术博客将为初学者们提供一份指南，通过一系列教程逐步深入地探索React，从最基础的概念讲解到框架的进阶应用，后续还会通过实际项目来加强巩固学习的成果，如果你想学习React，这个系列将无疑是一个很好的起点，让我们开始吧！！！！

如果想和更多的小伙伴交流讨论也可以在联系我，我们有一个专门的完全免费的交流群！！！

🥰本篇涉及部分

《JSX语法和组件》一共包含六个部分如下：

  1. JSX语法讲解
  2. Class组件
  3. 函数式组件
  4. 组建的样式
  5. 事件处理
  6. Ref的应用

！！！下篇将详细讲解后 3 部分，这样做也是为了方便小白的学习，减少每次的学习量，便于理解消化😋。

🔑正文

一、组件的样式

1. 使用行内样式

在组件的JSX代码中，可以为元素添加className属性并指定CSS类名，然后在CSS文件中定义对应的样式。例如：

// JSX代码
<div className = "my-component"> Hello World </div>

// CSS代码
.my-component {
  color: red;
  font-size: 20px;
}
2. 使用内联样式

在组件的JSX代码中，可以为元素添加style属性并指定样式对象，然后React会自动将其转换为内联样式。例如：

// JSX代码
<div style={{ color: 'red', fontSize: '20px' }}>Hello World!</div>

😋小白提示：

  • React中表达式要写再{ }中。

  • React推荐我们使用行内样式，因为React觉得每一个组件都是一个独立的整体，且当样式复杂之后采用内联样式的方式也会降低代码的可读性！

二、事件处理

1. 绑定事件

React中的事件处理与原生JavaScript事件处理非常类似，但有一些区别，React里的事件是小驼峰的形式，如： onClick ，原生JS种都是小写的形式，如：onclick。

2. 事件的处理函数的写法
  1. 直接再render函数里写行内的箭头函数（不推荐）
render(){
  return {
    <div>
    
      <button onClick = {() => {
        console.log("你点击了我！")
      }}>按钮</button>
      
    </div>
  }
}

😋小白提示： 这种写法不太推荐，因为处理逻辑直接写再HTML结构中，且当逻辑过多的时候，非常不利于代码的可读性，容易造成 “屎山”现象，给观看你代码的人带来极大的伤害！

  1. 在组件内使用箭头函数定义一个方法，然后直接绑定给事件 (比较推荐)

    render(){
  return {
    <div>
    
      <button onClick = {this.handleClick}>按钮</button>
      
    </div>
  }
}

// 单独定义事件的处理函数
handleClick = ()=> {
  console.log("你点击了我!")
}

😋小白提示：

  • 这里绑定事件不要这样写 this.hendleClick() , 这里加 () 的话就表示直接调用一次这个函数，不需要点击事件触发！

  • 这样写虽然利于可读性，但是遇到需要传递参数给处理函数的时候就不行了，所以还有一种推荐的写法。

  1. 在组件内定义一个非箭头函数的方法，然后写行内的箭头函数去绑定处理函数（适合传参需求）

    render(){
  return {
    <div>
    
      <button onClick = {() => this.handleClick()}>按钮</button>
      
    </div>
  }
}

// 单独定义事件的处理函数
handleClick = ()=> {
  console.log("你点击了我!")
}

😋小白提示： 这里采用this.hendleClick() 是因为这里需要点击事件触发后才会执行 {} 中的表达式，这里表达式的内容为调用一次handleClick函数。

3. Event 对象

和普通浏览器一样，事件handler会被自动传入一个 event 对象，这个对象和普通的浏览器 event 对象所包含的方法和属性都基本一致。不同的是 React中的 event 对象并不是浏览器提供的，而是它自己内部所构建的。它同样具有 event.stopPropagation 、 event.preventDefault 这种常用的方法

三、Ref的应用

在React中，ref是用于访问DOM元素或组件实例的特殊属性。它可以用来获取DOM元素的引用，从而可以在需要时访问和修改DOM元素，或者访问组件实例的属性和方法。这也后后面实现todolist小案例的一个关键知识点。

使用方式：

myRef = React.createRef()
<div ref={this.myRef}>hello</div>

😋小白提示：

  • 这里可以通过this.myRef.current 来访问到真实DOM元素，这里就可以访问到这个元素，实际项目中我们也经常需要获取到DOM元素。

  • DOM代表文档对象模型（Document Object Model），你可以理解为，每一个HTML标签就是一个DOM元素。

最后

以上就是 “🚀React小白自学指南---基础篇，第2篇《JSX语法和组件》下篇” 的全部内容，通过本文的学习，我们已经了解了组件样式、事件处理的一些书写方式，还了解到了React种可以通过Ref属性来获取DOM，最后我想说我会坚持持续更新下去，也希望大家可以给我 ”点赞、关注、评论“ ，这也是我持续下去的动力，我是多动症男孩（ddboy），因为自己淋过雨，所以想给你们撑把伞的未来前端技术专家！！！

avatar
文章
阅读
粉丝