React一基础

酒茶白开水

于 2024-07-15 15:00:38 发布

阅读量492

点赞数 6

分类专栏： web前端文章标签： react.js 前端前端框架脚手架组件 JSX 条件

本文链接：https://blog.csdn.net/jiuchabaikaishui/article/details/140438383

版权

web前端专栏收录该内容

33 篇文章 0 订阅

订阅专栏

代码下载

React 概述

React 是一个用于构建用户界面的javaScript库，起源于facebook的内部项目，后续在13年开源了出来。

特点：

声明式——只需要描述UI看起来是什么样式，就跟写HTML一样，React负责渲染UI
基于组件——组件时React最重要的内容，组件表示页面中的部分内容，组合、复用多个组件，可以实现完整的页面功能
学习一次，随处使用——使用React可以开发Web应用，使用React可以开发移动端，可以开发VR应用

React 基本使用

1、安装 React，在终端执行命令 npm i react react-dom：

react 包是核心，提供创建元素、组件等功能
react-dom 包提供 DOM 相关功能等

2、引入 react 和 react-dom 两个 js 文件：

    <script src="../node_modules/react/umd/react.development.js"></script>
    <script src="../node_modules/react-dom/umd/react-dom.development.js"></script>

3、创建 React 元素并渲染 React 元素到页面中：

<body>
    <div id="root"></div>
</body>

<script>
    const title = React.createElement('h2', null, 'React 基本使用')
    ReactDOM.createRoot(document.getElementById('root')).render(title)
</script>

React.createElement 方法说明：

返回值：React元素
第一个参数：要创建的React元素名称
第二个参数：该React元素的属性
第三个及其以后的参数：该React元素的子节点

const title = React.createElement('h2', null, 'hello, world!', React.createElement('a', { href: 'https://www.baidu.cn/' }, '百度'))

ReactDOM.createRoot(dom).render(el) 方法说明：要渲染的React元素渲染到页面中的指定位置。

React 脚手架

React脚手架意义：

脚手架是开发现代Web应用的必备
充分利用 Webpack，Babel，ESLint等工具辅助项目开发
零配置，无需手动配置繁琐的工具即可使用
关注业务，而不是工具配置

React 脚手架初始化项目：
1、初始化项目，命令：npx create-react-app my-app

npx 命令是 npm v5.2.0 引入的一条命令：

目的：提升包内提供的命令行工具的使用体验
原来：先安装脚手架包，再使用这个包中提供的命令
现在：无需安装脚手架包，就可以直接使用这个包提供的命令

2、启动项目，在项目根目录执行命令：npm start

补充

脚手架创建项目的方式：
1、推荐使用：npx create-react-app my-app

2、npm init react-app my-app

3、如果安装了 yarn，可以使用 yarn create react-app my-app

yarn 是 Facebook 发布的包管理器，可以看做是 npm 的替代品，功能与 npm 相同
yarn 具有快速、可靠和安全的特点
初始化新项目：yarn init
安装包： yarn add 包名称
安装项目依赖项： yarn
其他命令，请参考yarn文档

在脚手架中使用 React

1、导入 react 和 react-dom 两个包：

import React from 'react'
import ReactDOM from 'react-dom/client'

2、调用 React.createElement() 方法创建 react 元素，并使用 ReactDOM 渲染到页面中：

const title = React.createElement('h2', null, 'hello, world!')
ReactDOM.createRoot(document.getElementById('root')).render(title)

JSX

通过createElement()方法创建的React元素有一些问题，代码比较繁琐，结构不直观，无法一眼看出描述的结构，不优雅。

JSX是JavaScript XML 的简写，表示在JavaScript代码中写HTML格式的代码，JSX优势就是声明式语法更加直观，与HTML结构相同，降低了学习成本，提升开发效率。

使用 JSX 语法创建 react 元素，并使用 ReactDOM 渲染到页面中：

const hiJSX = <h2>hello JSX!</h2>
ReactDOM.createRoot(document.getElementById('hiJSX')).render(hiJSX)

思考，为什么在脚手架中可以使用JSX语法？

JSX 不是标准的ECMAScript语法，它是ECMAScript的语法拓展
需要使用babel编译处理后，才能在浏览器环境中使用
create-react-app脚手架中已经默认有该配置，无需手动配置
编译JSX语法的包： @bable/preset-react

使用 JSX 注意点：

React元素的属性名使用驼峰命名法。
特殊属性名：class -> className、for -> htmlFor、tabindex -> tabIndex 。
没有子节点的React元素可以用 /> 结束。
推荐：使用小括号包裹 JSX ，从而避免 JS 中的自动插入分号陷阱。

const note = (
  <div className='note' />
)
ReactDOM.createRoot(document.getElementById('note')).render(note)

JSX 中使用 JavaScript 表达式

JSX 嵌入 JS 表达式，语法是 { JavaScript表达式 }，注意事项如下：

单大括号中可以使用任意的 JavaScript 表达式
JSX 自身也是 JS 表达式
JS 中的对象是一个例外，一般只会出现在 style 属性中
不能在 {} 中出现语句（比如：if/for 等）

const sayHi = () => {
  return 'hello, JSX'
}
const expression = (
  <div>
    <p>{1}</p>
    <p>{'a'}</p>
    <p>{1 + 7}</p>
    <p>1 大于 2 吗？{1 > 2 ? '大于' : '小于或等于'}</p>
    <p>{sayHi()}</p>
    {/* 错误示例 */}
    {/* <p>{{ a: 'a' }}</p> */}
    {/* <p>{if (true) {}}</p> */}
    {/* <p>{for (var i = 0; i < 8; i++) {}}</p> */}
  </div>
)
ReactDOM.createRoot(document.getElementById('expression')).render(expression)

JSX 条件渲染

根据条件渲染特定的 JSX 结构，可以使用if/else或三元运算符或逻辑与运算符来实现：

var flag = true
// if-else
const load = () => {
  if (flag) {
    return <p>loading……</p>
  } else {
    return <p>加载完成</p>
  }
}
// 三元表达式
const load1 = () => {
  return flag ? <p>loading……</p> : <p>加载完成</p>
}
// 逻辑与运算符
const load2 = () => {
  return flag && <p>loading……</p>
}
const condition = (
  <div>
    if-else 条件语句：
    {load()}
    三元表达式：
    {load1()}
    逻辑与运算符：
    {load2()}
  </div>
)
ReactDOM.createRoot(document.getElementById('condition')).render(condition)

JSX 列表渲染

如果要渲染一组数据，应该使用数组的 map() 方法：

渲染列表时应该添加 key 属性，key 属性的值要保证唯一
map() 遍历谁，就给谁添加 key 属性
尽量避免使用索引号作为 key

const data = [
  { id: 0, name: 'one' }, 
  { id: 1, name: 'two' }, 
  { id: 2, name: 'three' }, 
  { id: 3, name: 'four' }
]
const ul = (
  <ul>
    {data.map(item => <li key={item.id}>{item.name}</li>)}
  </ul>
)
ReactDOM.createRoot(document.getElementById('list')).render(ul)

JSX 的样式处理

1、行内样式 —— style，在style里面通过对象的方式传递数据，这种方式比较的麻烦，不方便进行阅读，而且还会导致代码比较的繁琐：

const lineStyle = (
  <div style={{ backgroundColor: 'red', width: '100px', height: '100px'}}></div>
)
ReactDOM.createRoot(document.getElementById('lineStyle')).render(lineStyle)

2、类名 —— className（推荐），先创建CSS文件编写样式代码，然后在js中进行引入并设置类名即可：

/* css */
.green {
  background-color: green;
  width: 100px;
  height: 100px;
}

// js
import './index.css'
const className = (
  <div className='green'></div>
)
ReactDOM.createRoot(document.getElementById('className')).render(className)

总结：React完全利用JS语言自身的能力来编写UI，而不是造轮子增强HTML功能。

React 组件基础

组件是React的一等公民，使用React就是在用组件。组件表示页面中的部分功能，组合多个组件实现完整的页面功能。特点是可复用、独立、可组合。

React 组件的两种创建方式

1、使用函数创建组件，使用 JS 的函数（或箭头函数）创建的组件

函数名称必须以大写字母开头
函数组件必须有返回值，表示该组件的结构
如果返回值为 null，表示不渲染任何内容

// 渲染结构的函数组件
function FuncComOne() {
  return (
    <div>渲染结构的函数组件</div>
  )
}
ReactDOM.createRoot(document.getElementById('funcOne')).render(<FuncComOne></FuncComOne>)

// 不渲染结构的函数组件
function FuncComTwo() {
  return null
}
ReactDOM.createRoot(document.getElementById('funcTwo')).render(<FuncComTwo></FuncComTwo>)

// 使用箭头函数
const FuncComThree = () => <div>使用箭头函数创建渲染结构的函数组件</div>
ReactDOM.createRoot(document.getElementById('funcThree')).render(<FuncComThree></FuncComThree>)

渲染函数组件用函数名作为组件标签名，组件标签可以是单标签也可以是双标签。

说明：

使用JS中的函数创建的组件叫做函数组件
函数组件必须有返回值
组件名称必须以大写字母开头， React 据此区分组件和普通的React 元素
使用函数名作为组件标签名

2、使用类创建组件就是使用 ES6 的 class 创建的组件

类名称也必须以大写字母开头
类组件应该继承 React.Component 父类，从而可以使用父类中提供的方法或属性
类组件必须提供 render() 方法
render() 方法必须有返回值，表示该组件的结构

// 使用类创建组件
class ClassCom extends React.Component {
  render() {
    return (
      <div>渲染结构的类组件</div>
    )
  }
}
ReactDOM.createRoot(document.getElementById('classCom')).render(<ClassCom></ClassCom>)

抽离为独立 JS 文件

组件作为一个独立的个体，一般都会放到一个单独的 JS 文件中。

1、创建组件文件 SingleCom.js，在 SingleCom.js 中导入React创建组件（函数或类）并导出该组件：

import React from "react";

class SingleCom extends React.Component {
    render() {
        return (
            <div>把组件抽离为独立 JS 文件</div>
        )
    }
}

export default SingleCom

2、在 index.js 中导入 Hello 组件并渲染组件：

import SingleCom from './SingleCom'
ReactDOM.createRoot(document.getElementById('SingleCom')).render(<SingleCom></SingleCom>)

React 事件处理

React 事件绑定语法与 DOM 事件语法相似，语法是 on+事件名称={事件处理程序}，比如：onClick={() => {}}

注意：React 事件采用驼峰命名法，比如：onMouseEnter、onFocus

事件对象，可以通过事件处理程序的参数获取到事件对象。React 中的事件对象叫做：合成事件（对象），兼容所有浏览器，无需担心跨浏览器兼容性问题。

// 函数组件事件处理
function FuncComEvent() {
  function clickHandle(e) {
    e.preventDefault()
    console.log('点我干嘛');
  }
  return (
    <a href='https://www.baidu.cn/' onClick={clickHandle}>点我</a>
  )
}
ReactDOM.createRoot(document.getElementById('funcComEvent')).render(<FuncComEvent></FuncComEvent>)

// 类组件事件处理
class ClassComEvent extends React.Component {
  clickHandle(e) {
    e.preventDefault()
    console.log('点我干嘛');
  }
  render() {
    return (
      <a href='https://www.baidu.cn/' onClick={this.clickHandle}>点我</a>
    )
  }
}
ReactDOM.createRoot(document.getElementById('classComEvent')).render(<ClassComEvent></ClassComEvent>)

有状态组件和无状态组件

函数组件又叫做无状态组件，类组件又叫做有状态组件，状态（state）即数据：

函数组件没有自己的状态，只负责数据展示（静）
类组件有自己的状态，负责更新 UI，让页面“动” 起来

状态（state）即数据，是组件内部的私有数据，只能在组件内部使用，state 的值是对象，表示一个组件中可以有多个数据：

通过 this.state 来获取状态。
状态是可变的，通过 this.setState({ 要修改的数据 }) 来修改状态，setState() 的作用是修改 state 并更新UI，此思想是数据驱动视图。

注意：不要直接修改 state 中的值，这是错误的！！！

JSX 中掺杂过多 JS 逻辑代码，会显得非常混乱。推荐将逻辑抽离到单独的方法中，保证 JSX 结构清晰。

注意：事件处理程序中 this 的值为 undefined。希望 this 指向组件实例（render方法中的this即为组件实例）。

class StateCom extends React.Component {
  // 构造方法
  // constructor() {
  //   super()

  //   this.state = {
  //     count: 0
  //   }
  // }

  // 简写，不使用构造方法
  state = {
    count: 0
  }
  // 事件处理程序
  onDecrease() {
    // this 为 undefined
    this.setState({ count: this.state.count -1 })
  }
  render() {
    // render 方法 this 为组件实例
    return (
      <div>
        <p>数据结果：{this.state.count}</p>
        <button onClick={() => {
          // 箭头函数 this 为定义时的 this 即为组件实例

          // 修改 state
          this.setState({ count: this.state.count + 1 })

          // 错误修改 state 的方法
          // this.state.count++
        }}>+1</button>

        {/* 从 JSX 中抽离事件处理程序 */}
        <button onClick={this.onDecrease}>-1</button>
      </div>
    )
  }
}
ReactDOM.createRoot(document.getElementById('stateCom')).render(<StateCom></StateCom>)

事件绑定 this 指向

1、利用箭头函数自身不绑定this的特点，render() 方法中的 this 为组件实例，可以获取到 setState()。

2、利用ES5中的bind方法，将事件处理程序中的this与组件实例绑定到一起。

3、利用箭头函数形式的class实例方法，该语法是实验性语法，但是由于babel的存在可以直接使用。

// 处理 事件中 this 指向
class EventThis extends React.Component {
  constructor() {
    super()

    this.state = {
      count: 0
    }

    // 2、事件绑定 this 指向
    this.onIncreaceTwo = this.onIncreaceTwo.bind(this)
  }
  onIncreaceOne() {
    this.setState({ count: this.state.count + 1 })
  }
  onIncreaceTwo() {
    this.setState({ count: this.state.count + 2 })
  }
  // 3、class 的实例方法
  onIncreaceThree = () => {
    this.setState({ count: this.state.count + 3 })
  }
  render() {
    return (
      <div>
        <p>结果：{this.state.count}</p>
        {/* 1、通过箭头函数 */}
        <button onClick={() => this.onIncreaceOne()}>+1</button>
        <button onClick={this.onIncreaceTwo}>+2</button>
        <button onClick={this.onIncreaceThree}>+3</button>
      </div>
    )
  }
}
ReactDOM.createRoot(document.getElementById('eventThis')).render(<EventThis></EventThis>)

推荐使用class的实例方法。

表单处理

受控组件

HTML 中的表单元素是可输入的，也就是有自己的可变状态，而 React 中可变状态通常保存在 state 中，并且只能通过 setState() 方法来修改。React 将 state 与表单元素值value绑定到一起，由 state 的值来控制表单元素的值。

受控组件就是其值受到 React 控制的表单元素，处理受控组件步骤：

在 state 中添加一个状态，作为表单元素的value值（控制表单元素值的来源）
给表单元素绑定 change 事件，将表单元素的值设置为 state 的值（控制表单元素值的变化）

// 受控组件
class ControlCom extends React.Component {
  constructor() {
    super()

    this.state = {
      title: '',
      content: '',
      city: 'bj',
      isChecked: 'true'
    }
  }

  // 处理 文本框、富文本框、下拉框、复选框 的变化
  titleChange = e => this.setState({ title: e.target.value })
  contentChange = e => this.setState({ content: e.target.value })
  cityChange = e => this.setState({ city: e.target.value })
  isCheckedChange = e => this.setState({ isChecked: e.target.checked })

  render() {
    return (
      <div>
        <input type='text' placeholder='请输入标题' value={this.state.title} onChange={this.titleChange}></input>
        <br/>
        <textarea placeholder='请输入内容' value={this.state.content} onChange={this.contentChange}></textarea>
        <br/>
        <select value={this.state.city} onChange={this.cityChange}>
          <option value='bj'>北京</option>
          <option value='sh'>上海</option>
          <option value='sz'>深圳</option>
          <option value='gz'>广州</option>
        </select>
        <br/>
        <input type='checkbox' checked={this.state.isChecked} onChange={this.isCheckedChange}></input>
      </div>
    )
  }
}
ReactDOM.createRoot(document.getElementById('controlCom')).render(<ControlCom></ControlCom>)

受控组件多表单元素优化

个表单元素都有一个单独的事件处理程序处理太繁琐，可以使用一个事件处理程序同时处理多个表单元素，步骤如下：

给表单元素添加name属性，名称与 state 相同
根据表单元素类型获取对应值
在 change 事件处理程序中通过 [name] 来修改对应的state

// 受控组件
class ControlCom extends React.Component {
  constructor() {
    super()

    this.state = {
      title: '',
      content: '',
      city: 'bj',
      isChecked: true
    }
  }
  
  valueChage = e => {
    const value = e.target.type === 'checkbox' ? e.target.checked : e.target.value
    this.setState({ [e.target.name]: value })
  }

  render() {
    return (
      <div>
        <p>优化受控组件</p>
        <input name='title' type='text' placeholder='请输入标题' value={this.state.title} onChange={this.valueChage}></input>
        <br/>
        <textarea name='content' placeholder='请输入内容' value={this.state.content} onChange={this.valueChage}></textarea>
        <br/>
        <select name='city' value={this.state.city} onChange={this.valueChage}>
          <option value='bj'>北京</option>
          <option value='sh'>上海</option>
          <option value='sz'>深圳</option>
          <option value='gz'>广州</option>
        </select>
        <br/>
        <input name='isChecked' type='checkbox' checked={this.state.isChecked} onChange={this.valueChage}></input>
      </div>
    )
  }
}
ReactDOM.createRoot(document.getElementById('controlCom')).render(<ControlCom></ControlCom>)

非受控组件

借助于 ref，使用原生 DOM 方式来获取表单元素值，ref 的作用就是获取 DOM 或组件。使用步骤

调用 React.createRef() 方法创建一个 ref 对象
将创建好的 ref 对象添加到文本框中
通过 ref 对象获取到文本框的值

// 非受控组件
class UncontrolCom extends React.Component {
  constructor() {
    super()

    // 1、调用 React.createRef() 方法创建一个 ref 对象
    this.textRef = React.createRef()
  }
  render() {
    return (
      <div>
        {/* 2、将创建好的 ref 对象添加到文本框中 */}
        <input type='text' ref={this.textRef}></input>
        <button onClick={this.getText}>获取文本</button>
      </div>
    )
  }
  // 3、 通过 ref 对象获取到文本框的值
  getText= () => {
    console.log('text: ', this.textRef.current.value);
  }
}
ReactDOM.createRoot(document.getElementById('uncontrolCom')).render(<UncontrolCom></UncontrolCom>)

评论列表案例

class Comment extends React.Component {
  // 初始化状态
  state = {
    count: 10,
    comments: [
      { id: 1, name: 'jack', content: '沙发！！！' },
      { id: 2, name: 'rose', content: '板凳~' },
      { id: 3, name: 'tom', content: '楼主好人' }
    ],
    userName: '',
    userContent: ''
  }
  // 渲染评论列表：
  renderList() {
    const { comments } = this.state
    if (comments.length === 0) {
      return <div className='no-comment'>暂无评论，快去评论吧</div>
    }
    return comments.map(item => (
      <li key={item.id}>
        <h4>评论人：{item.name}</h4>
        <p>评论内容：{item.content}</p>
      </li>
    ))
  }
  // 处理表单元素
  formHandle = (e) => {
    const { name, value } = e.target
    this.setState({
      [name]: value
    })
  }
  // 添加评论
  addComment = () => {
    const { userName, userContent } = this.state
    if (userName.trim() === '' || userContent.trim() === '') {
      alert('请输入评论人和评论内容！')
      return
    }
    const newComments = [{
      id: Math.random(),
      name: userName,
      content: userContent
    }, ...this.state.comments]
    this.setState({ 
      comments: newComments,
      userName: '',
      userContent: ''
     })
  }
  render () {
    const { userName, userContent } = this.state
    return (
      <div className='comment'>
        <div>
          <input className='user' type='text' placeholder='请输入评论人' value={userName} name='userName' onChange={this.formHandle}></input>
          <br />
          <textarea className='content' cols='30' rows='10' placeholder='请输入评论内容' value={userContent} name='userContent' onChange={this.formHandle}></textarea>
          <br />
          <button onClick={this.addComment}>发表评论</button>
          {this.renderList()}
        </div>
      </div>
    )
  }
}
ReactDOM.createRoot(document.getElementById('comment')).render(<Comment></Comment>)

实现步骤：

1、渲染评论列表：

在 state 中初始化评论列表数据
使用数组的map方法遍历state中的列表数据
给每个被遍历的li元素添加key属性

渲染暂无评论：

判断列表数据的长度是否为0
如果为0，则渲染暂无评论

3、获取评论信息：使用受控组件方式处理表单元素

4、发表评论：

给按钮绑定单击事件
在事件处理程序中，通过state获取评论信息
将评论信息添加到state中，并调用 setState() 方法更新state
边界情况：清空文本框
边界情况：非空判断

酒茶白开水

关注

6
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
React一基础

React 是一个用于构建用户界面的javaScript库，起源于facebook的内部项目，后续在13年开源了出来。声明式——只需要描述UI看起来是什么样式，就跟写HTML一样，React负责渲染UI基于组件——组件时React最重要的内容，组件表示页面中的部分内容，组合、复用多个组件，可以实现完整的页面功能学习一次，随处使用——使用React可以开发Web应用，使用React可以开发移动端，可以开发VR应用。
复制链接

扫一扫