React学习笔记_react核心库-CSDN博客

本文链接：https://blog.csdn.net/cpsxn/article/details/129973110

React

一、react简介

1.react是什么

用于构建用户界面的JavaScript库。（操作DOM呈现页面）

是一个将数据渲染为HTML视图的开源JavaScript库。

**库：**解决某个小点。 jQuery库(提供了非常优秀的dom封装，可以更加方便的去操作dom)

**框架：**解决一类问题，围绕框架可以出现高级的封装。 Angular、React、Vue

2.谁开发的

由Facebook开发，且开源。

与2011年部署于Facebook的newsfeed

3.为什么要学

原生js操作dom繁琐、效率低。

使用js直接操作dom，浏览器会进行大量的重绘重排。

原生js没有组件化编码方案，代码复用率低。

注：重排重绘

浏览器下载完页面的所有组件——html标记、javascript、css、图片之后会解析生成两个内部数据结构——DOM树和渲染树

DOM树表示页面结构，渲染树表示DOM节点如何显示。

当DOM的变化影响了元素的几何属性（宽或高），浏览器需要重新计算元素的几何属性，同样其他元素的几何属性和位置也会因此受到影响。浏览器会使渲染树中受到影响的部分失效，并重新构造渲染树。这个过程称为重排。完成重排后，浏览器会重新绘制受影响的部分到屏幕，该过程称为重绘。

4.react特点

1.采用组件化模式、声明式编码、提高开发效率及组件复用率

声明式：只需要描述UI（HTML）看起来是什么样，就和写HTML一样。React负责渲染UI，并在数据变化时更新UI

**基于组件：**组件是react最重要的内容，组件表示页面中的部分内容。组合、复用多个组件，可以实现完整的页面功能

2.在React Native中可以使用React语法进行移动端开发。(JS可以写出来IOS\Android)

两种手机平台： IOS（OC Swift）、Android（java）

3.高效：使用虚拟DOM——优秀的Diffing算法 尽量减少与真实DOM的交互。

5.jsx

js的扩展语言，在js语言的基础上多了7个要求

二、React的基本使用

1.相关js库

1.react.js：React核心库

2.react-dom.js：提供操作DOM的react扩展库

3.babel.min.js：解析JSX 语法代码转为JS代码的库

react 核心库

cjs: CommonJS

umd:符合ES6模块化规范

production 生产时候用（代码写完了，部署到服务器上），体积小，高度压缩

babel.min.js : facebook所有， jsx====>js

react.development.js : 核心库 React

react-dom.development.js ：操作DOM,虚拟DOM转为真实DOM ReactDom

1.1使用步骤

1.安装react

**安装命令：**npm i react react-dom

react包是核心，提供创建元素、组件等功能

react-dom 包提供DOM相关功能

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

3.创建react元素

参数一：元素名称(html标签名)

参数二：元素属性

第三个及其以后的参数：元素的子节点

const title = React.createElement("h1",{title：'我是标题'，id：'p1'},'hello React')

4.渲染react元素到页面中

参数一：要渲染的react元素

参数二：挂载点

ReactDOM.render(title,document.getElementById('root'))

1.2方法说明

React.createElement()

ReactDOM.render()

2.hello react

 <!-- 引入react核心库 -->
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
 <!-- 引入react-dom 用于支撑react操作dom -->
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<!-- 引入babel,用于将jsx转为js -->
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

<!-- 准备好一个容器 -->
    <div id="box">111</div>
    <script type="text/babel">//必须写成bable
        // 定义虚拟dom,不要加引号，因为不是字符串，是虚拟dom
        const VDOM = <h1>hello react11!</h1>
        // 2.让react将虚拟DOM转为真实dom，插入到页面(追加，不是替换)
        ReactDOM.render(VDOM, document.getElementById('box'))
    </script>

ReactDOM.render(虚拟DOM, 容器)

react只关注页面，没有选择器的写法

3.git 复习

git分布式版本控制工具

3.1 git 交互

本地代码、远程代码（github网站）
1.克隆仓库
	git clone 仓库地址
2.把文件夹变成git仓库  初始化仓库
	git init 
3.关联远程仓库
	git remote add origin 仓库地址
4.推向暂存区，已在暂存区颜色（黄色）
	git add .
5.推向版本区，输入修改信息
	git commit -m "init"
6.拉取	
	git pull origin master
7.推送远程仓库
	git push origin master -u


	
产生冲突

三、JSX相关

为什么脚手架中可以使用JSX语法？

JSX不是标准的ECMAScript语法，它是ECMAScript的语法扩展

需要使用babel编译处理后，才能在浏览器中使用

create-react-app 脚手架中已经默认有该配置，无需手动配置

编译JSX语法的包为：@babel/preset-react

1.jsx的语法规则：

创建虚拟DOM时，不要写引号
标签中要混入js表达式，要使用 {}
标签中样式的类名要用：className 指定
标签中的内联样式要用：style={{color:‘white’,fontSize:‘30px’}},注意属性名转为小驼峰。
只能有一个根标签
标签必须闭合
关于标签首字母：

若首字符小写，那么react就会去寻找与之同名的html标签

若首字母大写，那么react就会去寻找与之同名的组件.
关于注释：{/* */}

四、React脚手架的使用

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

1.初始化：npx create-react-app 项目名称

2.启动项目：npm start

4.2react脚手架的基本使用

npx命令介绍

npm v5.2.0 引入的一条命令

无需安装脚手架，就可以直接使用这个包提供的命令

npm init react-app 项目名称

yarn create react-app 项目名称

yarn 介绍

Facebook 发布的包管理工具，可以看做是npm的替代品，功能与npm相同

初始化新项目：yarn init

安装包：yarn add 包名称

安装项目依赖： yarn

4.4 在脚手架中使用React

1.导入react和react-dom两个包(es6中模块化语法进行导入)

import React from 'react'
import ReactDOM from 'react-dom'
//2.创建react元素
const title = React.createElement('h1', { title: '我是标题', id: '01' }, 'Hello React!!!!!', '你好')
//3. 渲染react元素
ReactDOM.render(title, document.getElementById('root'))

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

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

4.5 总结

1.React是构建用户界面的JavaScript 库

2.使用react时，推荐使用脚手架方式

3.使用脚手架初始化react项目： npx create-react-app 项目名（不能包含大写）

4.启动项目：npm start

5.ReactcreateElement()方法用于创建react元素

6.ReactDOM.render()方法用于渲染react元素到页面中(根据具体使用平台导入)

注意：web应用导入ReactDOM

五、JSX

5.1 JSX的基本使用

1.jsx简介

JSX是JavaScript XML的简写，表示在javascript代码中写XML（HTML）格式的代码

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

2.使用步骤

1.使用JSX语法创建react元素

const title = <h1>Hello JSX</h1>

2.使用ReactDOM.render()方法渲染react元素到页面中

ReactDOM.render(titile,document.getElementById('root'))

3.总结

1.推荐使用JSX语法创建React元素

2.JSX语法更能体现出React的声明式的特点

4.注意点

1.React元素的属性名使用驼峰命名法

2.特殊属性名：class==>className、for ===》htmlFor 、tabindex ==》tabIndex

3.没有子节点的React元素可以用 /> 结束

4.使用 小括号包裹JSX，从而避免JS中的自动插入分号陷阱

5.2 JSX中使用JavaScript表达式

注意点：

1.嵌入JS表达式

语法：{ JavaScript表达式 }

//函数调用表达式
const sayHi = () => 'hi~'

const title = {
    <h1>
    	Hello JSX
    	<p>{ 1 + 7 }</p>
    	<p>{ sayHi() }</p>
    </h1>
}

2.JSX自身也是JS表达式

3.JS中的对象是一个例外，一般只出现在style属性中

4.不能在 {} 中出现语句：if、for

5.3 JSX的条件渲染

根据条件渲染特定的JSX结构

可以使用if/else、三元运算符或逻辑与运算符来实现

5.4 JSX的列表渲染

1.渲染一组数据,使用数组的map()方法

2.渲染列表时应该添加key属性，key属性的值要保证唯一

3.map()遍历谁，就给谁添加key属性 key={item.id}

4.尽量避免使用索引号（变化）作为key

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'))

5.5 JSX的样式处理

1.行内样式————style = { 对象 }

2.类名——————className

引入css文件

JSX样式

总结：

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

六、React组件

1.React组件介绍

组件表示页面中的部分功能，组合多个组件实现完整的页面功能

特点：可复用、独立、可组合

2.React组件的两种创建方式

2.1使用函数创建组件

函数组件：使用JS的函数（或箭头函数）创建的组件

约定1：函数名称必须以大写字母开头

约定2：函数组件必须有返回值，表示该组件的结构

如果返回值为null，表示不渲染任何内容

渲染函数组件：用函数名作为组件标签名

组件标签可以使单标签也可以使双标签

function Hello() {
  return (
    <div>函数组件</div>
  )
}
ReactDOM.render(<Hello></Hello>, document.getElementById('root'))

2.2使用类创建组件

类组件：使用ES6的class创建组件

约定1：类名称也必须以大写字母开头

约定2：类组件应该继承React.Component父类，从而可以使用父类中提供的方法或属性

约定3：类组件必须提供render()方法

约定4：render()方法必须有返回值，表示该组件的结构

2.3抽离为独立JS文件

将每个组件放到单独的JS文件中

1.创建Hello.js

2.在Hello.js中导入React

3.创建组件（函数或类）

4.在Hello.js中导出该组件

//Hello.js
import React from 'react'
class Hello extends React.Component {
    render(){
        return (
        	<div>Hello Class Component!</div>
        )
    }
}
//导出Hello组件
export default Hello

//index.js
import Hello from './Hello'
//渲染导入的Hello组件
ReactDOM.render(<Hello />,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>
    )
  }
}
//在函数组件中绑定事件
funciotn App(){
    function handleClick(){
        console.log('单击事件触发了')
    }
    return (
    	<button onClick={handleClick}>点我</button>
    )
}

3.2事件对象

可以通过事件处理程序的参数获取到事件对象

function handleClick(e){
    e.preventDefault()
    console.log('事件对象'，e)
}
<a onClick={handleClick}></a>

React中的时间对象叫左：合成事件（对象）

合成事件：兼容所有浏览器，无需担心跨浏览器兼容性问题

4.有状态组件和无状态组件

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

5.组件中的state和setState()

5.1 state的基本使用

状态（state）即数据，是组件内部的私有数据，只能在组件内部使用

state的值是对象，表示一个组件中可以有多个数据

class HelloApp extends React.Component {
  constructor() {
    super()  //es6中class的要求
    this.state = {
      count:0
    }
  }
  // 简化写法
 /*  state = {
    count: 0
  }
 */
  render() {
    return (
      <div>计数器：{this.state.count}</div>
    )
  }
}

获取状态：this.state

5.2 setState()修改状态

this.setState({ 要修改的数据 })

<button onClick={() => {
    this.setState({
        count:this.state.count + 1
    })
}}></button>

setState()作用：

1.修改state

2.更新UI

5.3 组件中的state和setState

从JSX中抽离事件处理程序，将逻辑抽离到单独的方法中，保证JSX结构清晰

this指向组件实例，（render方法中的this即为组件实例）

6.事件绑定this指向

6.1 箭头函数

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

6.2 function.prototype.bind()

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

constructor(){
	super()
    this.onIncrement = this.onIncrement.bind(this)
}

6.3class的实例方法

利用箭头函数形式的class实例方法(将实例方法改成箭头函数的形式)

onIncrement = () => {
    this.setState({})
}

7.表单处理

7.1 受控组件

其值受到React控制的表单元素

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

步骤：

1.在state中添加一个状态，作为表单元素的value值（控制表单元素值的来源）

2.给表单元素绑定change事件，将表单元素的值设置为state的值(控制表单元素值的变化)

<input type="text" value = { this.state.txt } onchange={this.handleContent}>

总结：

1.文本框、富文本框、下拉框操作value属性

2.复选框操作checked属性

多表单元素优化：

使用一个事件处理程序同时处理多个表单元素

步骤：

1.给表单元素添加name属性，名称与state相同

2.根据表单元素类型获取对应的值

//获取当前DOM对象
const target = e.target
//根据类型获取值
const value = target.type == 'checkbox' ? target.checked : target.value
//获取name
const name = target.name
this.setState({
    [name]: value
})

3.在change事件处理程序中通过[name] 来修改对应的state