React基础

最新推荐文章于 2024-09-26 06:13:55 发布



最新推荐文章于 2024-09-26 06:13:55 发布

阅读量160

点赞数

分类专栏： React 文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/weixin_44978043/article/details/121912984

版权

React 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1.概述

React是facebook公司研发的、以声明式UI视图结构为核心、完全独立的组件化开发的方式，通过单向数据流完成数据在DOM中的渲染，结合组件和视图快速完成前端项目的重量级开发框架
React的优点

声明式的UI视图结构，虚拟DOM的前身
完全独立的组件化开发
React单向数据流，本质上就是数据的单向绑定
React有着非常丰富的第三方社区

入门级应用

<!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>
    <!-- 2、确定挂载节点 -->
    <div id="app"></div>
    
    <!-- 1、 引入react、react-dom依赖-->
    <script src="./libs/react.development.js"></script>
    <script src="./libs/react-dom.development.js"></script>

    <!-- 3、虚拟DOM渲染 -->
    <script>
        // 3.1. react.js 核心依赖
        // 提供了一个创建虚拟节点的函数：React.createElement(节点名称, 属性对象, 子节点...)
        // eg: React创建了一个id属性为title的h1节点，包含了文本子节点数据
        let h1 = React.createElement("h1", {id: "title"}, "hello react!")

        // 3.2. react-dom.js DOM依赖
        // 提供了一个渲染节点数据的函数：ReactDOM.render(虚拟节点, 挂载的节点)
        ReactDOM.render(h1, document.querySelector("#app"))
    </script>
</body>
</html>

2.React核心API

React框架中，核心的API主要是两个
React.createElement()：用于声明式创建虚拟节点
React.render()：用于将虚拟节点，渲染到页面中的操作

let h1 =React.createElement('h1',{},'React嵌套节点')
let img = React.createElement("img",{src:'./imgs/1.img'})
let div = React.createElement("div",{id:"container"},h1,img)
ReactDOM.render(div,document.querySelector('#app'))

3.JSX

JSX是facebook研发团队针对React提供的一种混合语法，主要用于React项目界面、数据的开发，继承了JavaScript语言和XML语法的特点，通过JavaScript语法中直接嵌入XML（可扩展标记语言）>HTML(超文本标记语法)语法结构，提高虚拟DOM/声明式UI的开发效率
JSX是一种新的语法标准，浏览器无法直接识别（类似ES6语法），所以需要一个转换器将这样的高级语法转换成底层JavaScript语法，这个语法转换工具即：babel.js

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

JSX语法

let div = <div><h1>hello jsx</h1></div>

插值表达式

let person= {
	name: '张三',
	age: 20,
	sex: '男'
}
let div = <div>
	<p>{person.name}</p>
	<p>{person.age}</p>
	<p>{person.sex}</p>
</div>

属性绑定
如果数据需要绑定挂载到标签属性上，可以通过插值表达式的形式进行实现

let person = {
	name: '张三',
	age: 20,
	sex: '男',
	avatar: './images/1.jpg'
}
let div = <div>
	<img src={person.avatar}/>
</div>

样式处理
任何标签对象，都应该有自己的样式，可以结合插值表达式完成编码式样式的开发
注意：一般情况下，样式可以封装在css文件中进行使用，特殊场景中需要编程的方式添加样式

let imgstyle = {width:200,height: "200px"}
let div = <div>
<img src="./images/1.jpg" style={imgstyle}/>
</div>

注释
注释出现在声明式UI中，需要使用特定的语法{/*声明式UI中注释的特定语法*/}

let div = <div>
{/* 这里是注释内容 */}
</div>

条件渲染
JS部分，可以直接通过js语法中的if-else结构进行条件判断
声明式UI代码部分可以结合插值表达式，通过三元运算符完成条件判断

let age =16
let div = <div>
	<h1>{age>18?'成年':'未成年'}</h1>
</div>

列表渲染

let names = ['zhansgan','lisi','wangwu']
let div = <div>
{names.map(item=>{
	<h2>{item}</h2>
})}
</div>

JSX渲染富文本
富文本的渲染操作，尽量要保障数据安全性的前提下，进行渲染操作
富文本的处理很容易让万盏出现XSS漏洞，对网站数据的安全性造成威胁

let article = "<div><h1>富文本的使用</h1><p>我是内容</p></div>"
let div = <div>
	<div dangerouslySetInnerHTML={{__html:article}}>
</div>

4.组件

组件（compnent）封装了数据+UI结构的一个代码块，主要实现被封装的完整（数据）结构的复用

React中的JSX语法，让数据和结构之间的耦合度非常高，不利于数据和结构的复用，不利于开发效率的提高和后期代码的维护

函数式组件
函数式组件，本质上就是一个函数，函数的内部返回了一段HTML代码结构

函数式组件：本质上就是函数
函数式组件：组件名称首字母必须大写
函数中必须返回一段HTML代码/JSX代码，有着唯一的根标签

function Home() {
	return <div>我是函数式组件</div>
}

类式组件
React为了提高组件的功能，提供了一种基于class类的组件

class Home extends React.Component{
	// 类型内部，必须有render（）函数
	reder() {
		// 函数必须返回唯一跟标签JSX代码块
		return <div>类组件</div>
	}
}

注意：函数式组件，可以理解为只是一个UI结构，不包含自己的状态数据和生命周期
类组件，可以理解成一个成熟的数据UI，包含自己的状态数据和生命周期

组件状态数据
类组件可以包含自己的状态数据和声明周期，可以在组件内部直接使用自己的状态数据

class Hoem extends React.Componet{
	// 通过类属性state管理状态数据
	// 通过构造方法中的state管理状态数据
	constructor() {
		super() //初始化父类 
		this.state = {
			name: 'zhangsan'
		}
	}
	render() {
		return <div>{this.state.name}</div>
	}
}

事件
事件注册
React中JSX语法，如果出现了多个单词的拼接，建议使用驼峰命名法，事件的操作也遵循这个规则

render() {
	return <div><button onClick={this.handle}>单击事件</button></div>
}
handle() {
	console.log('用户点击了')
}

事件参数
事件的处理，不可避免的会遇到传递参数的操作，React要求事件函数绑定时不能直接调用执行函数，也就是不能在函数名称后面直接添加括号，导致了无法直接通过事件函数传递参数
React的事件属性绑定一个空的箭头函数（声明，不会立即执行），在箭头函数内部调用执行数据处理函数，可以给数处理函数传递参数

render(){
	return <div><button onClick={()=>this.changeData('新的数据')}>更新数据</button></div>
}
changeData(data) {
	console.log(data)
}

事件对象
部分处理函数中需要接收事件对象，获取一些特定数据，如师表坐标或者其他数据，此时React提供了自动注入的参数数据：事件对象

render() {
	return <input type='text' onKeyUp={e=>this.handleInput(e,'用户输入了')}>
}
handleInput(event,data) {
	console.log(event.target.value,data)
}

事件函数中this
Reat事件函数中，需要通过bind/call/apply修改this指向

<button onClick={()=>this.handleThis.bind(this)}>常规语法绑定事件
</button>

更新状态数据

通过state变量，存储类组件中状态数据
可以使用其他变量，但是和setState({})配合使用时容易出现问题，也不符合开发规范

通过setState({key:value})函数，完成状态数据更新、视图渲染数据的更新
操作方式1，可以独立更新数据，然后调用setState（{}）更新视图
操作方式2，可以直接通过setState({key:value,…})更新数据的同时，更新视图

setState（{})是一个异步函数，如果要处理修改后的数据，可以在回调函数中进行操作

class Home extends React.Componet{
	constructor() {
		super()
		this.state={
			name:'zhangsan'
		}
	}
	render(){
		return <div>{this.state.name}
			<input type="text" onKeyUp={this.changeName.bind(this)}>
		</div>
	}
	changeName(event) {
		let t = event.target.value
		this.setState({
			name:t
		},()=>{
			console.lof(this.state.name,'修改后的数据')
		})
	}
}