React基础篇（上）

最新推荐文章于 2024-07-22 22:48:30 发布
最新推荐文章于 2024-07-22 22:48:30 发布
阅读量517 收藏 2
点赞数 2
分类专栏： React 学习 文章标签： react.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45073669/article/details/122379533
版权

一、React 基本使用

  1. 先下载 react 和react-dom 的包 ，按以下命令安装
  2. npm i react react-dom
  3. 创建一个Html文件
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 1.引入js 文件 -->
    <script src="./node_modules/react/umd/react.development.js"></script>
    <script src="./node_modules/react-dom/umd/react-dom.development.js"></script>
    <div id="root"></div>
    <script>
        // 2. 创建React元素
        /**
         * 参数一：React 元素名称
         * 参数二：React 元素属性
         * 参数三：React 元素的子节点
         */
        // const title = React.createElement('h1', null, 'hello Word');
        const title = React.createElement('h1', {
            title: '我是标题',
            id: 'p1'
        }, 'hello Word', React.createElement('span', null, '我是一个span'));
        // 渲染 react 
        /**
         * 参数一：要渲染的react 元素
         * 参数二：挂载点
         */
        ReactDOM.render(title, document.getElementById('root'))
    </script>

</body>

</html>

二、React脚手架搭建及使用

  1. 初始化项目，命令：npx create-react-app+项目名字,（创建一个名为my-app的项目，示例：npx create-react-app my-app），当出现Happy hacking 就成功了

  2. 启动项目，命令：npm/yarn start

    npx create-react-app my-app
    npm/yarn start
    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OYLsN7YS-1641621205744)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220107160458108.png)]

2.1使用React脚手架初始化项目

npx 命令介绍

  • npm v5.2.0 引入的一条命令
  • 目的:提升包内提供的命令行工具的使用体验
  • 原来：先安装脚手架包，在使用这个包中提供的命令
  • 现在：无需安装脚手架包，就可以直接使用这个包提供的命令

补充说明

  1. 推荐使用：npx create-react-app my-app
  2. npm init react-app my-app
  3. yarn create react-app my-app
2.1再脚手架中使用React

  1. 导入react 和react-dom两个包,找到index.js文件使用es6模块化语法导入

  2. import React from 'react'
import ReactDOM from 'react-dom'

  3. 调用React.createElement()方法创建react元素

  4. 调用ReactDOM.render()方法渲染react元素到页面

三、JSX的语法

在这里插入图片描述

  • JSX的基本使用
  • JSX中使用Javascript表达式
  • JSX 的条件渲染
  • JSX的列表渲染
  • JSX的样式处理
1.JSX的基本使用

在这里插入图片描述

1.2JSX简介

JSX是JavaScript XML的简写，表示再JavaScript代码中写XML(HTML)格式的代码

优势：声明式语法更加直观、与HTML结构相同，降低学习成本，提升开发效率

JSX是React的核心内容

1.4 JSX循环渲染
const songs = [
	{id:1,name:'痴心绝对'},
	{id:2,name:'嫌我这样的人呢'},
	{id:3,name:'南山南'},
]

// 创建
const list = (<ul>
songs.map(item=>{<li key={item.id} >{{item.name}}</li>})
</ul>)

// 渲染
ReactDOM.render(list,document.getElementById('root'))
1.5JSX的样式处理
  1. 行内样式------style
const list = (<h1 style={{color:'red',backgroundColor:'yellow'}}>JSX的样式处理</h1>)

  1. 使用类名渲染使用，找到Css文件夹中的index.css文件

  2. 在此处添加css样式并在，index.js中导入

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

//引入css
import './css/index.css'

//jsx的样式处理
const list = (
<h1 className="title">你好 我是react</h1>
)

// 渲染react元素
ReactDOM.render(list.document.getElementById('root'))

    index.css

.title{
	text-align:center;
}
1.6JSX的总结

  1. JSX 是React的核心内容

  2. JSX标识再JS代码中写HTML结构，是React声明式的体现。

  3. 使用JSX配合嵌入的JS表达式，条件渲染，列表渲染，可以描述任意UI结构

  4. 推荐使用className的方式给JSX添加样式

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

    备注:vue就是通过 v-if v-for 这种指令来增强html的功能 react 与vue的不同之处

四、React组件

1.React组件介绍
  • 组件是react的一等公民，使用React就是在用组件
  • 组件标识页面中的部分功能
  • 组合多个组件实现完整的页面功能
  • 特点：可复用、独立、可组合
2.React组件的两种创建方式
2.1使用函数创建组件
  • 函数组件：使用JS的函数（或箭头函数）创建的组件
  • 约定1：函数名称必须以大写字母开头
  • 约定2：函数组件必须有返回值，表好似该组件的结构
  • 如果返回值为null，标识不渲染任何内容
// 函数组件： 
function Hello(){
    return(
    	<div>我是第一个函数组件！</div>
    )
}

// 箭头函数创建组件方式
const Hello=()=><div>我是第一个函数组件！</div>

ReactDOM.render(<Hello/>,document.getElementById('root'))
  • 渲染函数组件：用函数名作为组件标签名
  • 组件标签可以是单标签也可以是双标签
2.2使用类创建组件
  • 类组件:使用ES6的class创建的组件
  • 约定1：类名称也必须以大写字母开头
  • 约定2：类组件应该继承React.Component父类，从而使用父类中提供的方法和属性
  • 约定3：类组件必须提供render()方法
  • 约定4：render()方法必须有返回值，表示该组件的结构
// 类组件
// 创建类组件
class Hello extends React.Component{
    render(){
      retrun <div>Hello Class Component!</div>
    }
}

ReactDOM.render(<Hello />,document.getElementById('root'))
2.3抽离为独立JS文件
  1. 创建Hello.js
  2. 在Hello.js中导入React
  3. 创建组件（函数或类）
  4. 在Hello.js中导出该组件
  5. 在index.js中导入Hello组件
  6. 渲染组件
//  Hello.js
import React from 'react'
class Hello extends React.Component{
	render(){
	return (
		<div>hello 我是第一个被抽离出来的组件</div>
	)
	}
}
export default Hello

// index.js
import React from 'react'
import ReactDOM from 'react-dom'

// 导入Hello.js
import Hello from './Hello'
ReactDOM.render(<Hello />,document.getElementById('root'))
3.React事件处理
3.1事件绑定
  • React 事件绑定语法与DOM事件语法相似
  • 语法：on+事件名称={事件处理程序}，比如：onClick={()=>{}}
  • 注意：React事件采用驼峰命名法，比如:onMouseEnter、onFocus
// 类组件 事件绑定
class App extends React.Component{
  handleClick(){
    console.log('单击事件触发了')
  }
  render(){
  	return{
  	  (<button onClick={this.handleClick}></button>)
  	}
  }
}

// 函数组件 事件绑定
function App (){
  function handleClick(){
	console.log('单击事件触发了')
  }
  return (<button onClick={handleClick}></button>) 
}

ReactDOM.render(<App />,document.getElementById('root'))
3.2事件对象
  • 可以通过事件处理程序的参数获取到事件对象
  • React 中的事件对象叫做：合成事件（对象）
  • 合成事件：兼容所有浏览器，无需担心跨浏览器兼容性问题
class App extends React.Component{
  handleClick(e){
  // 阻止浏览器的默认行为
  e.preventDefault()
    console.log('单击事件触发了')
  }
  render(){
  	return{
  	  (<a href="http://itcast.cn" 
  	  onClick={this.handleClick}
  	  >传智播客</a>)
  	}
  }
}
4.有状态组件和无状态组件
  • 函数组件又叫做无状态组件，类组件又叫做有状态组件
  • 状态（state）即数据
  • 类组件有自己的状态，负责更新UI,让页面“动”起来

数据发生变化则使用类组件

5组件中的state和setState()
  1. state的基本使用
  2. setState()修改状态
5.1state的基本使用
  • 状态（state）即数据，是组件内部的私有数据，只能在组件内部使用
  • state的值是对象，表示一个组件中可以有多个数据
  • 获取状态：this.state
class Hello extends React.Component{
// 复杂写法
  constructor(){
      super()
      //初始化state
      this.state = {
      count:0
      }
  }
	// 简单语法初始化state （推荐）
	//state={
	//	count:0
	//}
   render(){
   	return (<div>有状态组件 {this.state.count}</div>)
   }
}
5.2setState()修改状态
  • 状态是可变的
  • 语法：this.setState({要修改的数据})
  • 注意：不要直接修改state中的值，这是错误的！！!
  • setState() 作用：1，修改state 2，更新UI
  • 思想：数据驱动视图
class App extends React.Component{
	 state={
		count:0,
		test:'a'
	}
    render(){
    	return (
    		<div>
            <h1>计数器：{this.state.count}</div>
            <button onClick={()=>{
                this.setState({
                    count:this.state.count + 1
                })
            }}>+1</button>
            
            </div>
    	)
    }
}

ReactDOM.render(<App />,document.getElementById('root'))
从JSX中抽离事件处理

  • JSX中掺杂过多JS逻辑代码，会显得非常混乱

  • 推荐：讲逻辑抽离到单独的方法中，保证JSX结构清晰

在这里插入图片描述

6.事件绑定this指向
  1. 箭头函数
  2. Function.prototype.bind()
  3. class的实例方法
6.1箭头函数
  • 利用箭头函数自身不绑定this的特点
  • render()方法中的this为组件实例，可以获取到setState()
class App extends React.Component{
	 state={
		count:0,
		test:'a'
	}
	onIncrement(){
	console.log('事件处理程序中的this',this)
	this.setState({
	count:this.state.count+1
	})
}
    render(){
    	return (
    		<div>
            <h1>计数器：{this.state.count}</div>
            <button onClick={()=>this.onIncrement()
            }>+1</button>
            
            </div>
    	)
    }
}

ReactDOM.render(<App />,document.getElementById('root'))
6.2Function.prototype.bind()
  • 利用ES5中的bind方法，将事件处理程序中的this与组件实例绑定在一起
    在这里插入图片描述
class App extends React.Component{
	constructor(){
        super()
        this.sate={
          count:0,
        }
        this.onIncrement = this.onIncrement.bind(this)
	}
	//事件处理程序
	onIncrement(){
        console.log('事件处理程序中的this',this)
        this.setState({
        count:this.state.count+1
        })
      
	}
    render(){
  	return (
  		<div>
          <h1>计数器：{this.state.count}</div>
          <button onClick={this.onIncrement()}> +1 </button>
        </div>
  	)
    }
}

ReactDOM.render(<App />,document.getElementById('root'))
6.3class的实例方法（推荐）
  • 利用箭头函数形式的class实例方法
  • 注意：该语法是实验性语法，但是，由于babel的存在可以直接使用
    在这里插入图片描述
class App extends React.Component{
	this.sate={
	     count:0,
	}
	//事件处理程序
	onIncrement=()=>{
	       console.log('事件处理程序中的this',this)
	       this.setState({
	       count:this.state.count+1
	       }) 
	}
  render(){
   	return (
   		<div>
           <h1>计数器：{this.state.count}</div>
           <button onClick={this.onIncrement}>+1</button> 
           </div>
   	)
  }
}

ReactDOM.render(<App />,document.getElementById('root'))
7.表单处理
  1. 受控组件
  2. 非受控组件（DOM方式）
7.1受控组件
  • HTML中的表单元素是可输入的，也就是有自己的可变状态
  • 而，React中可变状态通常保存在state中，并且只能用过setState()方法来修改
  • React将state与表单元素值value绑定到一起，有state的值来控制表单元素的值

步骤

  1. 在state中添加一个状态，作为表单元素的value值（控制表单元素值的来源）
  2. 给表单元素绑定change事件，将表单元素的值 设置为state的值（控制表单元素值的变化）
class App extends React.Component{
  state={
    txt:''
  }
  textChange=e=>{
    this.setState({
      txt:e.target.value
    })
  }
}
render(){
  return (
  	<div>
  	  <input type="text" value={this.state.txt} onChange={this.textChange} />
  	</div>
  )
}

ReactDOM.render(<APP/>,document.getElementById('root'))

示例

class App extends React.Component{
  state={
    txt:'',
    content:'',
    city:'bj',
    ischeck:true
  }
  textChange=e=>{
    this.setState({
      txt:e.target.value
    })
  },
  handleContent=e=>{
   this.setState({
      txt:e.target.value
    })
  }
  handleCity=e=>{
   this.setState({
      txt:e.target.value
    })
  }
  handleCheck=e=>{
   this.setState({
      txt:e.target.cheked
    })
  }
}
render(){
  return (
  	<div>
  	// 文本框
  	  <input type="text" value={this.state.txt} onChange={this.textChange} /> <br/>
  	  //文本域
  	  <textarea value={this.state.content} onChange={this.handleContent} ></textarea> <br/>
  	  // 下拉框
  	  <select value={this.state.city} onChange={this.handleCity}>
  	  	<option value="sh">上海</option>
  	  	<option value="bj">北京</option>
  	  	<option value="sz">深圳</option>
  	  </select> <br/>
  	  //复选框
  	  <input type="checkbox" checked={this.state.
  	  ischeck} onChange={this.handleCheck} /> 
  	</div>
  )
}

ReactDOM.render(<APP/>,document.getElementById('root'))

多表单元素优化步骤：

  1. 给表单元素添加name属性，名称与state相同
  2. 根据表单元素类型获取对应值
  3. 在change事件处理程序中通过[name]来修改对应的state
// 优化后
class App extends React.Component{
  state={
    txt:'',
    content:'',
    city:'bj',
    ischeck:true
  }
  formChange=e=>{
  const target = e.target
  const value = e.target.type === "checkbox" ? e.target.checked:e.target.value
  const name = target.name
    this.setState({
      [name]:value
    })
  }
}
render(){
  return (
  	<div>
  	// 文本框
  	  <input type="text" 
		name="txt" 
		value={this.state.txt}
		onChange={this.formChange} /> <br/>
  	   
  	  //文本域
  	  <textarea 
		value={this.state.content}
		name="content"
		onChange={this.formChange} ></textarea> <br/>
  	  // 下拉框
  	  <select value={this.state.city} 
  	  name="city" onChange={this.formChange}>
  	  	<option value="sh">上海</option>
  	  	<option value="bj">北京</option>
  	  	<option value="sz">深圳</option>
  	  </select> <br/>
  	  //复选框
  	  <input type="checkbox"
		name="ischeck"
		checked={this.state.ischeck}
		onChange={this.formChange} /> 
  	</div>
  )
}

ReactDOM.render(<APP/>,document.getElementById('root'))
7.2非受控组件
  • 说明：借助于ref，使用原生DOM方式来获取表单元素值
  • ref的作用：获取DOM或组件

使用步骤：

  1. 调用React.createRef()方法创建一个ref 对象

    constructor(){
  super()
  this.txtRef = React.createRef()
}

  2. 将创建好的ref对象添加到文本框中

    <input type="text" ref={this.txtRef} />

  3. 通过ref 对象获取到文本框的值

    console.log(this.txtRef.current.value)
前端小白想学理财
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
浏览器的卡顿与react的解决思路
weixin_45575944的博客
07-18 425
众所都周知，js是单线程，当react处理vdom相关工作的时候，会阻塞浏览器的渲染过程，阻塞了渲染过程，那么页面就卡着。结合上面所述，1秒60hz，相当于16.67ms至少需要渲染出1张新图，才不会觉的卡顿。我理解这里的卡顿，并不是说优化的怎么怎么好让总工作量少了，处理的快了，而是可能虽然每次渲染出来的新内容少，但是他仍然在生成，而不会在处理过程中一直不变，然后突然渲染出来，这种抖动的、掉帧的渲染方式，容易让人觉的他卡了，而一直在变化，虽然每次变化的不多，但总体是‘流畅的’
HOW - React 处理不紧急的更新和渲染
weixin_58540586的博客
07-21 454
在 React 中，有一些钩子函数可以帮助你处理不紧急的更新或渲染，从而优化性能和用户体验。
面试问题：React基本概念，和所遇到的CPU和IO问题
m0_60030316的博客
07-18 576
useDeferredValue：类似防抖，截流的功能，但是比他们效率更高，他是利用React内部Schedular(调度器)实现的，通过切换优先级，当用户输入的时候，先显示输入的值，把计算值的动作排在优先级后面每次用户修改值react都会计算渲染的值，当用户新输入会打断这个过程，重新按照最新值来跑渲染，达到优化用户体验的功能。在官方文档里面可以看见React基本设计概念，React是用 JavaScrip构建快速响应的大型Web应用程序的首选方式，但是快速响应用一定的是依赖，CPU的性能和IO的约束。
【React Hooks原理 - useSyncExternalStore】
weixin_44273311的博客
07-19 672
从基本使用、源码解析（Mount首次渲染、Update更新渲染）、举例说明来介绍了useSyncExternalStore的基本原理和使用，并举例扩展了其实关于SSR的水合阶段的介绍
[React]利用Webcomponent封装React组件
SCUhzs
07-19 793
[React]利用Webcomponent封装React组件
React学习第一天——基础知识讲解
m0_64180838的博客
07-18 411
react基础
如何理解React State不可变性的原则
最新发布
唐家小妹的博客
07-22 92
总的来说，React State 不可变性原则要求开发者遵循一种更安全、可预测和高效的状态管理方式，通过创建新的状态副本来更新状态，避免直接修改状态值，从而确保组件状态的一致性和可控性。要更新组件的状态，应该使用 setState 方法，该方法接受一个新的状态对象或一个返回新状态对象的函数作为参数，React 会根据新状态对象的变化来重新渲染组件。为了确保状态的不可变性，更新状态的函数应该是纯函数，即函数的返回值仅取决于其输入参数，不会修改外部状态，这样可以更容易追踪状态变化。
WHAT - React Context 两层组件的优化机制
weixin_58540586的博客
07-21 597
为了避免这种情况，可以将组件分为两个部分：一个外层组件从 Context 中读取所需的内容，并将这些内容作为 props 传递给使用。通过这种方式，Provider 组件管理状态逻辑，Consumer 组件专注于渲染逻辑，从而实现了状态逻辑和视图逻辑的分离。具体来说，当 Context 的值发生变化时，所有使用。这样，通过将组件分为两个部分，确保只有与子组件相关的 Context 值变化时才会触发子组件的重新渲染，从而优化性能。这样，只有当与子组件相关的 Context 值发生变化时，子组件才会重新渲染。
HOW - SVG 图标组件封装（Lucide React）
weixin_58540586的博客
07-18 1206
在中我们介绍过 “动态 Fetch CDN SVG 图标”，这种在开发者将需要用到 图标 依次上传到 CDN 再在项目通过请求引入使用的场景。但其实，更常见的做法还是统一维护一组 SVG 图标，然后将其封装成组件，直接在项目中通过 Import 的形式使用。
web前端 React 框架面试200题（三）
柯晓楠
07-21 403
纯组件是可以编写的最简单和最快的组件。它们可以替换任何只有 render() 的组件。这些组件增强了代码的简单性和应用程序的性能。Context 通过组件树提供了一个传递数据的方法，从而避免了在每一个层级手动的传递 props 属性在JSX表达式中，一个开始标签(比如)和一个关闭标签(比如)之间的内容会作为一个特殊的属性props.children被自动传递给包含着它的组件。
深度解析：在 React 中实现类似 Vue 的 KeepAlive 组件
liyananweb的博客
07-18 515
在 Vue 中，keep-alive是一个抽象组件，用于缓存不活动的组件实例。性能优化：避免不必要的重新渲染。状态保持：在组件切换时保持组件的状态。通过本文的介绍，我们了解了如何在 React 中实现类似 Vue 的keep-alive组件。虽然 React 没有内置的keep-alive组件，但通过高阶组件和 React Portal，我们可以实现类似的功能，从而提升应用的性能和用户体验。希望这篇文章对你有所帮助，如果你有任何问题或建议，欢迎在评论区留言讨论！
React使用Button的多选，设置默认勾选样式，会闪
2401_85955297的博客
07-18 257
React使用Button的多选，设置默认勾选样式，会闪，可考虑自己添加元素实现
学习React(描述 UI)
qq_63170044的博客
07-22 704
React 是一个用于构建用户界面（UI）的 JavaScript 库，用户界面由按钮、文本和图像等小单元内容构建而成。React 帮助你把它们组合成可重用、可嵌套的组件。从 web 端网站到移动端应用，屏幕上的所有内容都可以被分解成组件。在本章节中，你将学习如何创建、定制以及有条件地显示 React 组件。
websocket-react使用
weixin_45705239的博客
07-18 511
在一个应用中，如果需要在不同的组件之间共享同一个WebSocket连接，可以采用多种方法来实现。比如：单例模式、全局变量、react context。
antd drawer extra中按钮点击事件获取子组件的数据
u010234868的专栏
07-18 343
在ChildComponent内部，它通过useImperativeHandle暴露了一个getData方法，该方法返回需要传递给父组件的数据。在ParentComponent的handleButtonClick事件处理函数中，通过childRef.current.getData()调用子组件的方法来获取数据。在子组件中使用useImperativeHandle或forwardRef来暴露一个方法给父组件调用。在extra按钮的点击事件中，调用子组件暴露的方法获取数据。
Electron 和 React 开发桌面应用程序
MyLovelyJay的博客
07-22 497
Electron 和 React 开发桌面应用程序
【React】深入探索React：表单控制、组件通信、副作用管理、自定义Hook
DZSpace，专注于计算机科学与技术领域的技术博主，致力于分享实用知识与技巧，帮助读者快速掌握技术要点，共同探索计算机世界的无限可能。欢迎访问DZSpace的博客，一起学习进步！
07-22 201
【React】深入探索React：表单控制、组件通信、副作用管理、自定义Hook
UseMemo、UseCallback、React.memo
chaozhou的博客
07-18 1097
上述两个钩子和一个API都是围绕状态来展开的。根据依赖的状态是否变化，选择性的进行值、函数或者组件的刷新。虽然通过缓存可以提升性能，但是使用时也会造成额外的代价，比如增加内存用量、额外监听特定的状态是否变化了等等，所以在使用之前要确定自己是否真的需要它。
React antd form表单未保存跳转页面提示
Martin 的博客
07-19 243
表单编辑后没保存，跳转其他页面需要提示未保存，保存就继续form的submit，反之就是关闭弹窗，再切换菜单正常跳转路由。
React面试深度解析：组件基础与事件机制
"这篇PDF文件包含了2022年最新的React面试题目，旨在帮助前端面试者准备React相关的技术考察。内容涉及React组件基础、事件机制等核心知识点，强调了React事件处理的特性和与传统HTML事件的区别。" React组件基础是...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值