[JavaScript知识库]2021-07-29

什么是 react

react 是一个用于构建用户页面得 JavaScript 库

主要是用来写 html，或构建 web 应用

MVC 角度 React 仅仅是试图层 V，也就是负责试图得渲染，而且非提供完整得 M 和 C 得功能

React 特点

1、声明式(跟 html 结构一样)

2、基于组件

3、学习一次，随处使用(使用React可以开发 Web 用
使用React可以开发移动端原生应用( react-native )
使用React可以开发VR(虚拟现实)应用(react360))

React 的安装

安装命令: npm i react react-dom

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

react-dom 包提供 DOM 相关功能等

React 脚手架意义

脚手架是开发现代 Web 应用的必备。

充分利用Webpack、Babel、 ESLint 等工具辅助项目开发。

零配置，无需手动配置繁琐的工具即可使用。

关注业务，而不是工具配置。

使用 React 脚手架初始化项目

初始化项目，命令:npx create-react-app my-app

或者npm init react- app my-app

yarn create react-app my- app
(yarn是Facebook发布的包管理器，可以看做是npm的替代品，功能与npm相同
yarn具有快速、可靠和安全的特点

初始化新项目: yarn init

安装包:yarn add包名称

安装项目依赖项: yarn

其他命令，请参考yarn文档

)

npx 命令介绍

npm v5.2.0 引入的一条命令

目的:提升包内提供的命令行工具的使用体验

原来:先安装脚手架包，再使用这个包中提供的命令

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

在脚手架中使用 React

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

import React from 'react'

import ReactDOM from 'react - dom'

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

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

React 基础 总结

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

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

3.初始化项目命令: npx create-react-app my-app。

4.启动项目命令: yarn start (或npm start)。

5. React.createElement( 方法用于创建 react 元素(知道)

6. ReactDOM.render() 方法负责渲染 react 元素到页面中。

createElement()的问题

1.繁琐不简洁。

2.不直观，无法一眼看出所描述的结构。

3.不优雅,用户体验不爽。

JSX 是 React 得核心内容

JSX是 JavaScript XML的简写,表示在 JavaScript 代码中写 XML ( HTML )格式的代码。

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

为什么使用 jsx 语法

1.JSX 不是标准的 ECMAScript 语法,它是 ECMAScript 的语法扩展。

2.需要使用 babel 编译处理后,才能在浏览器环境中使用。

3.create-react app 脚手架中已经默认有该配置,无需手动配置。

4.编译 JSX 语法的包为:@babel/preset-react.

jsx 注意点

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

2、特殊属性名: class -> className. for -> htmlFor. tabindex -> tabIndex。

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

4、推荐:使用小括号包裹 JSX， 从而避免 IS 中的自动插入分号陷阱。

jsx 嵌入 js 表达式

数据存储在 js 中

语法: 单花括号{ JavaScript 表达式}

JSX 的列表渲染

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

原则: map0 遍历谁，就给谁添加 key 属性

注意:渲染列表时应该添加 key 属性，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>
);

jsx 总结

1、JSX 是 React 的核心内容。

2、JSX 表示在 JS 代码中写 HTML 结构，是 React 声明式的体现。

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

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

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

React 组件介绍

组件是 React 的一等公民，使用 React 就是在用组件

组件表示页面中的部分功能

组合多个组件实现完整的页面功能

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

React 组件两种创建方式

使用函数创建组件，

函数组件:使用JS的函数(或箭头函数)创建的组件

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

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

使用类创建组件

class Hello extends React.Component{
  render() {
  return <div>Hello Class Component !</div>
  }
  ReactDOM.render(<Hello/>,document.getElementById("root"))

ES6 的 class 创建组件

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

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

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

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

如何抽离组件为单独的 js 文件中

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

步骤

创建 Hello.js

在 Hello.js 中导入 React

创建组件(函数或类)

在 Hello.js 中导出该组件

渲染组件

React 事件处理

事件绑定

React 事件绑定语法与 DOM 事件语法相似

语法: on+事件名称= (事件处理程序} ,比如: onClick={()=> {}

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

事件对象

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

React 中的事件对象叫做:合成事件(对象)

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

有状态组件和无状态组件

● 函数组件又 叫做无状态组件，类组件又叫做有状态组件

● 状态(state )即数据

●函数组件没有自己的状态 ，只负责数据展示(静)

●类组件有自己的状态，负责更新UI，让页面"动” 起来

state 和 setState

state 使用

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

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

setState 修改状态

状态是可变的

语法: this.setState({要修改的数据))

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

setState()作用: 1. 修改 state 2.更新 UI

this.setstate({
  count: this.state.count + 1,
});

事件绑定 this 指向

箭头函数

● 利用箭头函数自身不绑定 this 的特点

class Hel1o extends React . Component {
onIncrement (){
this. setState({ .. })
}
render () {
//箭头函数中的this指向外部环境，此处为: render()方法
return (
<button onClick={() => this.onIncrement () }></button>
)
}

Function.prototype.bind()

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

class Hel1o extends Re act.Component {
constructor () {
super ()
this.onIncrement=this.onIncrement.bind (this )
// ...省略onIncrement
render() {
return (
<button onClick= {this . onIncrement }></button>
)
}
}

class 实例方法

● 利用箭头函数形式的 class 实例方法

class Hello extends React.Component {
onIncrement =
=> {
this. setstate({ })
}
render () {
return
<button onClick= {this . onIncrement }></button>
)
}
}

表单处理

受控组件

HTML 中的表单元素是可输入的,也就是有自己的可变状态

而，React 中可变状态通常保存在 state 中，并且只能通过 setState0 方法来修改.

React 将 state 与表单元素值 value 绑定到一起,由 state 的值来控制表单元素的值

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

受控组件步骤

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

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

state = { txt: "" };
<input
  type="text"
  value={this.state.txt}
  onChange={(e) => this.setState((txt: e.target.value))}
/>;

受控组件案例：

class App extends React.Component {
  state = {
    txt: "",
    content:'',
    city: 'bj',
    isChecked: false
  };
  handleChange = (e) => {
    this.setstate({
      txt: e.target.value,
    });
  };
  //处理富文本框的变化
handleContent = e => {
  this.setstate({
  content:e.target.value
  })
//处理下拉框的变化
handleCity = e =》{
  this.setstate({
  city:e.target.value
  })
//处理复选框的变化
handleChecked = e => { 
  this.setstate({
  isChecked:e.target.checked
  })

  render() {
   return (
<div>
{/*文本框*/}
<input type="text" value={this.state.txt} onChange={this.handlechange} />
<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="gz">厂州</opt ion>
</select>
<br/>
{/*复选框*/}
<input type="checkbox" checked={ this. state. isChecked} onChange={this.handleChcked} />
</div>
   )
  }
}

非受控组件

使用步骤:

1.调用React.createRef0方法创建一个ref对象

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

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

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

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

Console.log(this.txtRef.current.value)