React基础篇（上）

最新推荐文章于 2024-07-21 14:56:11 发布
最新推荐文章于 2024-07-21 14:56:11 发布
阅读量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基础篇——16.0-17.0版本
yezhihaobk的博客
07-05 1428
react是什么、为什么学、JSX语法规则、模块化与组件、模块化与组件化的理解、组件实例三大属性,高阶函数和函数柯里化,组件的生命周期、key的作用
hello-react:诱人的 react - 基础篇
05-13
如果是指mbox（多变量测试），它可能与网站优化或A/B测试有关，但在React基础教程中不常涉及。 学习"hello-react"基础篇时，你会逐步了解如何设置React环境，创建React组件，使用Redux进行状态管理，结合Webpack...
React 基础篇（一）
浅陌繁星的博客
07-26 597
是一个声明式，高效且灵活的用于构建用户界面的 JavaScript 库。使用 React 可以将一些简短、独立的代码片段组合成复杂的 UI 界面，这些代码片段被称作“组件”。
react入门基础篇
weixin_51601829的博客
02-24 383
在学习react中，第一步初始化项目以后（npm init）一直按空格键初始化，导致名字默认为‘react’， 然后在安装npm i react react-dom时候提示报错， 经排查发现名字不能和安装包名字重复，可在package.json中查看 改成不一样的即可 ...
React Native 基础篇
wang_yong_hui_1234的博客
10-26 1516
虽然React Native出来已经很久了，但是还是想分享一下。技术这东西更新的太快，觉得有用就学，不能犹豫，不然什么都不会。 一，环境配置 1，这里讲的是window+android配置，如果想了解其他配置请去官网查看（http://reactnative.cn/） 2，本人的配置步骤： ①，更新sdk，在SDK Platforms窗口中，选择Show Package Details...
react笔记-01基础篇
m0_65519288的博客
05-04 913
react基础内容
React 基础篇（七）—— Context
2401_84447207的博客
04-29 931
编程基础的初级开发者，计算机科学专业的学生，以及平时没怎么利用过数据结构与算法的开发人员希望复习这些概念为下次技术面试做准备。或者想学习一些计算机科学的基本概念，以优化代码，提高编程技能。这份笔记都是可以作为参考的。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
React基础入门
donglize521521的博客
09-24 3109
React系列二 - 核心JSX语法一 React系列二 - 核心JSX语法二 React系列三 - 阶段案例练习
React学习笔记(基础篇)
m0_54088427的博客
03-30 1939
React学习笔记(基础) 1.React介绍 ​ react由facebook公司推出，因为该公司不满足于市面上现有的前端框架，他们认为MVC只会让前端越来越复杂，因此react就诞生了，react只关注与视图层，官方对react的定位是：一个快速构建前端视图的javaScript库。 2.React的特点 虚拟DOM ​ 如果没有虚拟DOM，每次DOM改变的时候，都需要在浏览器中进行渲染。每一次DOM改变的时候，浏览器都需要重新计算CSS，进行布局处理，然后重新渲染页面，这都需要时间
React基础篇——十、自定义DOM属性
sxww_zyt的博客
10-22 172
十、自定义DOM属性 React 16 之前会忽略不是把的HTML和SVG属性，现在React会把不识别的属性传递给DOM。 React16之前： 　　<div cust-attr="someting"></div>会被渲染成: 　　<div></div> React 16渲染出来的节点： 　　<div cust-attr="someting...
React基础篇（三）之 webpack打包项目配制
代码小疯子
02-10 1245
创建项目 目录 1 初始化项目 使用 IDE 打开目录 在命令行中初化化项目 npm init -y 然后安装 webpack cnpm i webpack -D 然后安装 webpack-cli webpack-cli 用来执行webpack相关命令 cnpm i webpack-cli -D 创建 源代码src目录、打包输出目录 dist目录 然后在 src 目录中 创建 in...
React基础学习视频（上）.zip
08-07
React.js 是 Facebook 推出的一个用来构建用户界面的 JavaScript 库。React 中，把一切东西都看成组件，而且所有组件有其状态。什么是状态？简单来说，一个组件有多种...上篇包含：React 概述、React组件生命周期详解
《React开发实战》初级入门篇
07-04
1. **React基础知识**：React是由Facebook开发的一个JavaScript库，主要用于构建用户界面，尤其是单页应用。它引入了组件化开发模式，让开发者可以将UI拆分为独立、可复用的部分，每个部分称为一个组件。React使用...
REACT：学习REACT基础知识
02-17
React是Facebook推出的一款用于构建用户界面的...以上是React基础知识的概览，学习React还需要通过实践来加深理解，不断探索其与其他库和技术的结合，如Redux、Webpack、Babel等，以构建更高效、可维护的Web应用。
React基础学习视频（下）.zip
08-07
React.js 是 Facebook 推出的一个用来构建用户界面的 JavaScript 库。React 中，把一切东西都看成组件，而且所有组件有其状态。...下篇包括：JSX 语法及特点介绍、React 属性和状态详解、React 相关开发工具
浏览器的卡顿与react的解决思路
weixin_45575944的博客
07-18 428
众所都周知，js是单线程，当react处理vdom相关工作的时候，会阻塞浏览器的渲染过程，阻塞了渲染过程，那么页面就卡着。结合上面所述，1秒60hz，相当于16.67ms至少需要渲染出1张新图，才不会觉的卡顿。我理解这里的卡顿，并不是说优化的怎么怎么好让总工作量少了，处理的快了，而是可能虽然每次渲染出来的新内容少，但是他仍然在生成，而不会在处理过程中一直不变，然后突然渲染出来，这种抖动的、掉帧的渲染方式，容易让人觉的他卡了，而一直在变化，虽然每次变化的不多，但总体是‘流畅的’
HOW - React 处理不紧急的更新和渲染
最新发布
weixin_58540586的博客
07-21 458
在 React 中，有一些钩子函数可以帮助你处理不紧急的更新或渲染，从而优化性能和用户体验。
面试问题：React基本概念，和所遇到的CPU和IO问题
m0_60030316的博客
07-18 583
useDeferredValue：类似防抖，截流的功能，但是比他们效率更高，他是利用React内部Schedular(调度器)实现的，通过切换优先级，当用户输入的时候，先显示输入的值，把计算值的动作排在优先级后面每次用户修改值react都会计算渲染的值，当用户新输入会打断这个过程，重新按照最新值来跑渲染，达到优化用户体验的功能。在官方文档里面可以看见React基本设计概念，React是用 JavaScrip构建快速响应的大型Web应用程序的首选方式，但是快速响应用一定的是依赖，CPU的性能和IO的约束。
【React Hooks原理 - useSyncExternalStore】
weixin_44273311的博客
07-19 675
从基本使用、源码解析（Mount首次渲染、Update更新渲染）、举例说明来介绍了useSyncExternalStore的基本原理和使用，并举例扩展了其实关于SSR的水合阶段的介绍

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值