一:基础回顾
1.react是什么?
react是一个用于构建用户界面的javascript库,它只负责应用的视图层,帮助开发人员构建快速且交互式的web应用程序。
react使用组件的方式构建用户界面。
2.jsx语法
在 React 中使用 JSX 语法描述用户界面,它是一种 JavaScript 语法扩展。
在 React 代码执行之前,Babel 会将 JSX 语法转换为标准的 JavaScript API。
JSX 语法就是一种语法糖,让开发人员使用更加舒服的代码构建用户界面。
jsx 语法很像html语法,但不是html语法。
- 2.1 在jsx中使用使用表达式:
const user = {
firstName: 'Harper',
lastName: 'Perez'
}
function formatName(user) {
return user.firstName + ' ' + user.lastName;
}
const element = <h1>Hello, {formatName(user)}!</h1>;
JSX 本身其实也是一种表达式,将它赋值给变量,当作参数传入,作为返回值都可以。
function getGreeting(user) {
if (user) {
return <h1>Hello, {formatName(user)}!</h1>;
}
return <h1>Hello, Stranger.</h1>;
}
- 2.2 属性
如果属性值为字符串类型,需要加引号,属性名称推荐采用驼峰式命名法。
const element = <div greeting="hello"></div>;
如果属性值为JavaScript表达式,属性值外面加大括号。
const element = <img src={user.avatarUrl} />;
// 注意大括号外面不能加引号,JSX 会将引号当中的内容识别为字符串而不是表达式
- 2.3 JSX 单标记必须闭合
如果 JSX 是单标记,必须闭合,否则报错。
const element = <img src={user.avatarUrl} />
const element = <input type="text"/>
- 2.4 className
为 JSX 标记添加类名需要使用 className,而不是class。
const element = <img src={user.avatarUrl} className="rounded"/>;
- 2.5 JSX 自动展开数组
可以对数组自动展开。
const ary = [<p>哈哈</p>, <p>呵呵</p>, <p>嘿嘿</p>];
const element = (
<div>{ary}</div>
);
// 解析后
/*
<div>
<p>哈哈</p>
<p>呵呵</p>
<p>嘿嘿</p>
</div>
*/
- 2.6 三元运算
{ boolean ? <div>Hello React</div> : null }
{ boolean && <div>Hello React</div> }
- 2.7 循环
key:元素可以帮助react识别哪些元素修改了,哪些元素没有修改。它可以减少dom操作,进一步做性能优化
const persons = [{
id: 1,
name: '张三',
age: 20
}, {
id: 2,
name: '李四',
age: 15
}, {
id: 3,
name: '王五',
age: 22
}]
<ul>
{ persons.map(person => <li key={person.id}> {person.name} {person.age} </li>) }
</ul>
- 2.8 事件
{/* 第一个参数即是事件对象 不需传递 */}
<button onClick={this.eventHandler}>按钮</button>
{/* 需要传递事件对象 */}
<button onClick={e=>this.eventHandler('arg',e)}>按钮</button>
{/* 最后一个参数即是事件对象 不需传递 */}
// .bind() 第一个参数:改变 this的指向。第二个开始:可以传递自己定义的参数。
<button onClick={this.eventHandler.bind(null, 'arg')}>按钮</button>
constructor () {
this.eventHandler = this.eventHandler.bind(this)
}
eventHandler () {}
<button onClick={this.eventHandler}>按钮</button>
on+ 事件名称
如何绑定事件?如何进行参数传递?
- 2.9 样式
在react中是以组件的方式开发的。因此要考虑如何添加样式。只应用到组件本身,而不泄漏到外部。- 2.9.1 行内样式(遇到数值,可以不加单位,直接写数值)
class App extends Component {
render() {
const style = {width: 200, height: 200, backgroundColor: 'red'};
return <div style={style}></div>
}
}
- 2.9.2 外链样式(使用css编写样式)
注意文件的命名合适:import styles from './Button.module.css'
// Button.js
import styles from './Button.module.css';
class Button extends Component {
render() {
return <button className={styles.error}>Error Button</button>;
}
}
- 2.9.3 全局样式
通过import直接引入
import './styles.css'
- 2.10 ref 属性
使用ref可以获取到这个组件/元素的实例对象。
在react中ref有3种使用方式。
- 2.10.1 createRef
// 获取input的dom对象
class Input extends Component {
constructor() {
super()
this.inputRef = React.createRef()
// 有一个current属性,这个current属性中存放的就是当前的dom对象
console.log(this.inputRef.current)// 输出dom对象
}
render() {
return (
<div>
<input type="text" ref={this.inputRef} />
<button onClick={() => console.log(this.inputRef.current)}> button </button>
</div>
)
}
}
- 2.10.2 函数参数
ref:指定为一个函数。这个函数有一个参数,这个参数就是当前元素对应的dom对象。接下来在函数体中通过this,给这个类(Input)添加一个input属性,这个属性的值就是当前元素对应的dom对象。可以通过console.log(this.input)输出dom对象。
class Input extends Component {
render() {
return (
<div>
<input type="text" ref={input => (this.input = input)} />
<button onClick={() => console.log(this.input)}>button</button>
</div>
)
}
}
- 2.10.3 ref 字符串
不推荐使用,在严格模式下报错。
class Input extends Component {
render() {
return (
<div>
<input type="text" ref="username" />
<button onClick={() => console.log(this.refs.username)}>button</button>
</div>
)
}
}
- 2.10.4 案例:获取组件实例
点击按钮让 input 文本框获取焦点。
input 文本框以及让文本框获取焦点的方法定义在 Input 组件中,在 App 组件中引入 Input 组件,按钮定义在 App 组件中。
// Input.js
class Input extends Component {
constructor() {
super()
this.inputRef = React.createRef()
this.focusInput = this.focusInput.bind(this)
}
focusInput() {
this.inputRef.current.focus()
}
render() {
return (
<div>
<input type="text" ref={this.inputRef} />
</div>
)
}
}
// App.js
class App extends Component {
constructor() {
super()
this.InputComponentRef = React.createRef()
}
render() {
return (
<div className="App">
<Input ref={this.InputComponentRef} />
<button onClick={() => this.InputComponentRef.current.focusInput()}>button</button>
</div>
)
}
3. 组件
-
3.1 什么是组件
React 是基于组件的方式进行用户界面开发的. 组件可以理解为对页面中某一块区域的封装。
react中有2种类型的组件。
-
3.2 创建组件
- 3.2.1 创建类组件
- App继承Component中的方法
- 必须有一个redner函数
- 在当前的组件中没有使用react,为什么要引入呢?这是因为:这个jsx代码在执行之前会被转换成React.createElement方法,那么这个代码在执行的时候一定会找React.createElement这个方法,所以在这个文件的顶部要引入react,如果不引入, 在执行的时候是找不到react的, 就会报错。
import React, { Component } from 'react';
class App extends Component {
render () {
return <div>Hello, 我是类组件</div>
}
}
- 3.2.2 创建函数组件
普通的函数,用 return直接返回页面当中要呈现的内容
const Person = () => {
return <div>Hello, 我是函数型组件</div>;
}
注意事项
- 组件名称首字母必须大写。 react用以区分当前调用的是组件还是普通html标签。
- jsx语法外层必须有一个根元素。因为在jsx当中规定在语法的外面必须要有一个根元素。
3.3 组件 props
3.3.1 props 传递数据
-
在jsx中如何在组件的外部向内部传递数据?在组件中可以通过 props 对象获取外部传递进来的数据
-
props: 以属性的方式向组件的内部传递数据。
-
案例
<Person name="乔治" age="20"/>
<Person name="玛丽" age="10"/>
类组件获取数据的的方式
// 类组件
class Person extends Component {
render() {
return (
<div>
<h3>姓名:{this.props.name}</h3>
<h4>年龄:{this.props.age}</h4>
</div>
);
}
}
函数组件获取数据的方式:以参数的方式传递。
// 函数组件
const Person = props => {
return (
<div>
<h3>姓名:{props.name}</h3>
<h4>年龄:{props.age}</h4>
</div>
);
}
注意:
- props 对象中存储的数据是只读的,不能在组件内部被修改。
- 当 props 数据源(传递数据的地方)中的数据被修改后,组件中的接收到的 props 数据会被同步更新,而且页面当中的数据也会跟着同步的,这就是数据驱动dom的原理。( 数据驱动DOM的原理 )
3.3.2 设置 props 默认值
在调用这个组件的时候,传递一些属性,但是这些属性是可以有设置默认值的。如何设置接收到props当中的默认值呢?
类组件设置默认值:
class App extends Component {
static defaultProps = {}
}
函数组件设置props默认值
function ThemedButton(props) {
}
ThemedButton.defaultProps = {
theme: "secondary",
label: "Button Text"
};
3.3.3 组件 children
-
通过 props.children 属性可以获取到在调用组件时填充到组件标签内部的内容。
-
例如:在调用person组件的时候,没有添加属性,而是在组件的内部去添加了一些内容,那么一定要清楚这些内容是要显示在组件内部的。也就是说:我要在组件内部获取到这个内容。
在组件内部我们要通过props.children来获取到这个内容。
<Person>组件内部的内容</Person>
const Person = (props) => {
return (
<div>{props.children}</div>
);
}
3.3.4 单向数据流
-
在React中, 关于数据流动有一条原则, 就是单向数据流动, 自顶向下, 从父组件到子组件.(不允许从子组件到父组件)
-
单向数据流特性要求我们共享数据要放置在上层组件中
. -
子组件通过调用父组件传递过来的方法更改数据.(通过props传递的数据是不能修改的,但是在某个组件内需要修改这个数据,那么怎么做呢?答:需要在顶层组件内定一个修改数据的方法,传递给子组件,子组件通过调用这个防方法,来修改数据props。)
-
当数据发生更改时, React会重新渲染组件树.(数据变化的时候,会同步到使用到的组件)
-
单向数据流使组件之间的数据流动变得可预测. 使得定位程序错误变得简单.(因为数据的流动时有机可循的,因此可以推测。)
3.4 类组件状态 state
3.4.1 定义组件状态
- 类组件除了能够从外部 (props) 接收状态数据以外还可以拥有自己的状态 (state),此状态在组件内部可以被更新,状态更新 DOM 更新。
- 组件内部的状态数据被存储在组件类中的 state 属性中,state 属性值为对象类型,属性名称固定不可更改。
class App extends Component {
constructor () {
super()
this.state = {
person: { name: '张三', age: 20 },
}
}
render () {
return (
<div>
{this.state.person.name}
{this.state.person.age}
</div>
);
}
}
3.4.2 更改组件状态
- state 状态对象中的数据不可直接更改,如果直接更改 DOM 不会被更新,要更改 state 状态数据需要使用 setState方法。
class App extends Component {
constructor () {
this.state = {
person: { name: '张三', age: 20 },
}
this.changePerson = this.changePerson.bind(this)
}
changePerson () {
this.setState({
person: {
name: '李四',
age: 15
}
})
}
render() {
return (
<div>
{this.state.person.name}
{this.state.person.age}
<button onClick={this.changePerson}>按钮</button>
</div>
);
}
}
3.4.3 双向数据绑定
-
双向数据绑定是指,组件类中更新了状态,DOM 状态同步更新,DOM 更改了状态,组件类中同步更新。组件 <=> 视图。
-
双向指的是:1.组件类,2.页面中的dom元素。
-
双向数据绑定指的是:如果组件类当中修改了状态,那么dom也会同步更新状态。如果dom更新了状态,组件类中储存的状态也会同步更新。
组件类中的状态会影响视图,视图当中把状态更改了,它也会影响到组件类。这就是双向数据绑定。 -
要实现双向数据绑定需要用到表单元素和 state 状态对象。
因为在dom元素中只有表单元素的它才可以更改这个数据。
class App extends Component {
constructor () {
this.state = {
name: "张三"
}
this.nameChanged = this.nameChanged.bind(this)
}
nameChanged (event) {
this.setState({name: event.target.value});
}
render() {
return (
<div>
<div>{this.state.name}</div>
<Person name={this.state.name} changed={this.nameChanged}/>
</div>
)
}
}
const Person = props => {
return <input type="text" value={props.name} onChange={props.changed}/>;
}
3.5 类组件生命周期函数
- 什么生命周期函数?当程序运行到某个阶段会自动执行的函数,就是生命周期函数。可以利用生命周期函数,在程序运行到某一时刻,去做一些他想要做的事情。
- 组件的生命周期分为3个阶段:1.挂载阶段,2.组件的数据更新阶段 3.组件的卸载阶段
-
挂载阶段
当一个新的组件被创建的时候,首先会执行constructor函数,可以在constructor中初始化状态对象,改变函数内部的this指向。当constructor这个构造函数执行完成之后,就去执行getDerivedStateFromProps周期函数,getDerivedStateFromProps是什么意思呢?当前组件的状态如果取决于父组件的状态,那么这个时候就可以使用到getDerivedStateFromProps生命周期函数,在getDerivedStateFromProps中有2个参数,一个是;通过props接收到的父组件传递过来的state,另一个是当前这个组件的state,我们可以通过这2个参数,来决定当前要不要更新当前组件的state,如果不需要更新就返回null,如果需要更新,返回全新的状态对象,但是一定要返回,不返回时是不被允许的。当这个生命周期函数执行完成之后,会去执行redner方法,在render方法中会挂载dom对象,当render方法执行完成之后,会去执行componentDidMount这个周期函数,预示着当前的组件已经挂载完成。
在挂载阶段需要注意:1.在constructor函数中不要引起一些副作用,例如:发起请求,获取数据,这样的事情放在componentDidMount函数中执行
- 2.组件的更新阶段
当组件当中的数据发生更新之后,首先会执行getDerivedStateFromProps,查看状态有没有必要发生更新,替换了之前的compoentwillreciveprops周期函数,当getDerivedStateFromProps运行完成之后,调用shouldComponentUpdate函数,在这个生命周期函数中返回true/false,如果返回了true,继续走下面的周期函数,如果返回false,那就就停止更新组件。如果返回了true,
接下来重新运行render函数重新渲染这个组件,当render方法执行完之后,会去调用getSnapshotBeforeUpdates周期函数,这个用的较少。
getSnapshotBeforeUpdate是什么意思?getSnapshotBeforeUpdate在render方法执行之后去执行,在这个方法中可以执行某种逻辑或计算,这个方法最终要返回snapshot(快照),这个返回值会传递到可以componentDidUpdate,在componentDidUpdate方法中的第三个参数中获取。这2个生命周期是配合使用的。如果只定义了getSnapshotBeforeUpdate这个函数,而没有定义componentDidUpdate程序会报错。
getSnapshotBeforeUpdate这个函数用于组件更新之前完成一些计算逻辑。然后把结果返回给componentDidUpdate。在componentDidUpdate我们可以处理结果。
在组件完成更新之前需要做某种逻辑或者计算,就需要用到快照。
componentDidUpdate(prevProps, prevState, snapshot) {}
getSnapshotBeforeUpdate 方法会在组件完成更新之前执行,用于执行某种逻辑或计算,返回值可以在 componentDidUpdate 方法中的第三个参数中获取,就是说在组件更新之后可以拿到这个值再去做其他事情。
getSnapshotBeforeUpdate(prevProps, prevState) {
return 'snapshot'
}
- 3.组件的卸载阶段
在组件卸载之前,会调用componentWiiUnmount这个周期函数,预示着组件将要被卸载。
在这个周期函数中做一些清理工作。例如:清理通过ref绑定的dom对象,清理定时器…
3.6 Context
- 通过 Context 可以跨层级传递数据
- Context:的作用是什么?
组件的pros是从上到下依次传递,如果组件层级比较深,那就比较麻烦,因为中间的其他组件没有用到数据的也要传递数据,这个时候,就要用Context,跨层级传递数据。 - 如下图:
A,D,F要用到根组件的username,如果用props,就是根组件->b, 根组件->c->e-> f. 这个过程太复杂,而且这个过程中b,c,e根本就没有用到username,但是参与了数据的传递,这样不好。
那么这个时候用Context跨级传递就再好不过了。a, d, f可以直接拿到数据,不用经过中间的组件,忽略中间的b,c,e组件。
// userContext.js
import React from "react"
// 创建上下文对象
const userContext = React.createContext("default value")
// Provider: 用来向下传递数据
// Consumer: 用来从上面取数据
const UserProvider = userContext.Provider
const UserConsumer = userContext.Consumer
export { UserProvider, UserConsumer }
根组件
// App.js
import { UserProvider } from "./userContext"
class App extends Component {
render() {
return (
<UserProvider value="Hello React Context">
<A />
</UserProvider>
)
}
}
需要用到数据的地方(a,d,f直接用到数据的地方)
// C.js
import { UserConsumer } from "./userContext"
export class C extends Component {
render() {
return (
<div>
<UserConsumer>
{username => {
return <div>{username}</div>
}}
</UserConsumer>
</div>
)
}
}
context 的另一种用法
// userContext.js
export default userContext
// C.js
import userContext from "./userContext"
export class C extends Component {
static contextType = userContext
render() {
return (
<div>
{this.context}
</div>
)
}
}
4. 表单
4.1 受控表单
表单控件中的值由组件的 state 对象来管理,state对象中存储的值和表单控件中的值时同步状态的。
这个同步状态是如和实现的?是通过数据的双向绑定来实现的。
class App extends Component {
constructor () {
this.state = { username: "" }
this.nameChanged = this.nameChanged.bind(this)
}
nameChanged (e) {
this.setState({username: e.target.value})
}
render() {
return (
<form>
<p>{this.state.username}</p>
<input type="text" value={this.state.username} onChange={this.nameChanged}/>
</form>
)
}
}
4.2 非受控表单
表单元素的值由 DOM 元素本身管理。
class App extends Component {
constructor () {
this.onSubmit = this.onSubmit.bind(this)
}
onSubmit(e) {
console.log(this.username.value)
e.preventDefault();
}
render(
<form onSubmit={this.onSubmit}>
<input type="text" ref={username => this.username = username}/>
</form>
)
}
5. 路由
什么是路由?
路由就是:url地址与组件之间的对应关系,访问不同的url地址显示不同的组件。
下载:npm install react-router-dom
5.1.1 路由基本使用
// App.js
//BrowserRouter:表示浏览器路由。Router放在最外层,这是规则,要求。
//Route:设置,匹配路由规则。path:资格组件的地址。component: 组件。
// Link: 设置链接用的。to属性:就是链接地址。
import React from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
function Index() {
return <div>首页</div>;
}
function News() {
return <div>新闻</div>;
}
function App() {
return (
<Router>
<div>
<Link to="/index">首页</Link>
<Link to="/news">新闻</Link>
</div>
<div>
<Route path="/index" component={Index}/>
<Route path="/news" component={News}/>
</div>
</Router>
);
}
5.1.2 路由嵌套
路由嵌套什么时候使用?
在页面中出现2级链接,3级链接,这个时候需要使用路由前套。
${props.match.url}
: 上一级的访问地址
${props.match.url}/company
: 当前的访问地址
props.match.url: 获取link里面的to地址
props.match.path: 获取到的是Route里面的path
function News(props) {
return (
<div>
<div>
<Link to={`${props.match.url}/company`}>公司新闻</Link>
<Link to={`${props.match.url}/industry`}>行业新闻</Link>
</div>
<div>
<Route path={`${props.match.path}/company`} component={CompanyNews} />
<Route path={`${props.match.path}/industry`} component={IndustryNews}/>
</div>
</div>
);
}
function CompanyNews() {
return <div>公司新闻</div>
}
function IndustryNews() {
return <div>行业新闻</div>
}
5.1.3 路由传参
url: 用来解析地址的字符串,转成对象格式的数据。
import url from 'url';
class News extends Component {
constructor(props) {
super(props);
this.state = {
list: [{
id: 1,
title: '新闻1'
}, {
id: 2,
title: '新闻2'
}]
}
}
render() {
return (
<div>
<div>新闻列表组件</div>
<ul>
this.state.list.map((item, index) => {
return (
<li key={index}>
<Link to={`/detail?id=${item.id}`}>{item.title}</Link>
</li>
);
})
</ul>
</div>
);
}
}
class Detail extends Component {
constructor(props) {
super(props);
}
const { query } = url.parse(this.props.location.search, true);
console.log(query); // {id: 1}
render() {
return <div>新闻详情</div>
}
}
5.1.4 路由重定向
import { Redirect } from 'react-router-dom';
class Login extends Component {
render() {
if (this.state.isLogin) {
return <Redirect to="/"/>
}
}
}
- class 声明的类组件中 render 函数的 this 指向组件实例对象
- function 定义的函数组件中的 this 是undefined