续 react <一>
五、React组件化开发(一)
5.1 组件化
- 是一种分而治之的思想:如果将一个页面中所有的处理逻辑全部放在一起,处理起来就会变得非常复杂
- 将一个页面拆分很多个组件实现一个个小的功能块
- 而每一个组件又可以进行细分
- 每一个组件又可以在多个地方复用
- 之后将每一个模块组装在一起
5.2 React的组件化
-
组件化是 React 的核心思想,前面封装的 App本身就是一个组件
- 组件化提供了一种抽象,可以开发出一个个独立可复用的小组件来构造应用
- 任何的应用都会被抽象成一棵组件树
-
组件化思想的应用
- 有了组件化的思想,在之后的开发中就要充分的利用它
- 尽可能的将页面拆分成一个个小的、可复用的组件
- 这样让代码更加方便组织和管理,并且扩展性也更强
-
React 的组件相对于 Vue 更加的灵活和多样,按照不同的方式可以分成很多类组件
- 根据组件的定义方式可以分为
- 函数组件
- 有很多缺点,但是都被 hooks 修补了
- 使用 function 来定义
- 类组件
- 函数组件
- 根据组件内部是否有状态需要维护
- 无状态组件
- 有状态组件(类组件有维护自己的状态 state 称作有状态组件)
- 根据组件的不同职责
- 展示型组件
- 容器型组件
- 包含很多很多的功能
- 维护自己的状态,发送一些网络请求
- 根据组件的定义方式可以分为
-
函数组件、无状态组件、展示型组件—关注UI的展示
-
类组件、有状态组件、容器型组件—关注数据逻辑
-
异步组件、高阶组件
5.3 类组件
- 类组件的定义有如下要求
- 组件的名称是大写字符开头(无论类组件还是函数组件)
- 类组件需要继承自 React.Component
- 类组件必须实现 render 函数
- 在 ES6 之前,可以通过 create-react-class 模块来定义类组件,但是目前官网建议使用 ES6 的 class 类定义
- 使用 class 定义一个组件:
- constructor 是可选的,通常在 constructor 中初始化一些数据
- this.state 中维护的是组件内部的数据
- render() 方法是 class 组件中唯一必须实现的方法
// import { Component } from "react";
// 内部是通过 export {} 导出的
import React from "react";
function HelloWorld() {
return <h1>HelloWorld</h1>;
}
// 1. 类组件
class App extends React.Component {
// 维护自己的状态
constructor() {
super();
this.state = {
message: "App Component",
};
}
render() {
const { message } = this.state;
// 1. react 元素:通过 jsx 编写的代码就会被编译成 React.createElement,所以返回的就是一个 React 元素
// return <h2>{message}</h2>;
// 2. 组件或者fragments
return <HelloWorld></HelloWorld>;
// return ["abc","def","yyy"]
// 3. 字符串/数字类型
// return "heeel"
}
}
export default App;
5.4 render 函数的返回值
- 当 render 被调用时,会检查 this.props 和 this.state 的变化并返回以下类型之一
- React 元素
- 通常通过 JSX 创建出来的都叫 react 元素
- 例如,
会被 React 渲染为 DOM 节点, 会被 React 渲染为自定义组件
- 无论是
还是 均为 React 元素
- 数组或 fragments:使得 render 方法可以返回多个元素
- Portals:可以渲染子节点到不同的 DOM 子树中
- 字符串或数值类型:它们在 DOM 中会被渲染为文本节点
- 布尔类型或 null:什么都不渲染
import React from "react";
function HelloWorld() {
return <h1>HelloWorld</h1>;
}
// 1. 类组件
class App extends React.Component {
// 维护自己的状态
constructor() {
super();
this.state = {
message: "App Component",
};
}
render() {
const { message } = this.state;
// 1. react 元素:通过 jsx 编写的代码就会被编译成 React.createElement,所以返回的就是一个 React 元素
// return <h2>{message}</h2>;
// 2. 组件或者fragments
return <HelloWorld></HelloWorld>;
// return ["abc","def","yyy"]
// 3. 字符串/数字类型
// return "heeel"
}
}
export default App;
5.5 函数组件
- 使用 function 来定义的函数,返回和类组件中 render 函数返回一样的内容
- 特点
- 没有生命周期,也会被更新并挂载,但是没有生命周期函数
- this 关键字不能指向组件实例
- 没有内部状态 state
- 之前只是为了展示数据
// 函数式组件
function App() {
// 返回值:和类组件中的render函数返回的是一致的
return <h1>App Function Component</h1>
}
export default App
5.6 生命周期
- 在最合适的地方完成自己想要的功能
- 生命周期:一个抽象的概念
- 装载阶段 Mount:组件第一次在 DOM 树中被渲染的过程
- 更新过程 Update:组件状态发生变化,重新更新渲染的过程
- 卸载过程 Unmount:组件从 DOM 树中被移除的过程
- 生命周期函数(钩子函数):对组件内部实现的某些函数进行回调
- componentDidMount 函数:组件已经挂载到 DOM 上了
- **componentDidUpdate **函数:组件已经发生了更新
- **componentWillUnmount **函数:组件从 DOM 树中被移除的过程
- 开发者来编写,生命周期函数是由 react 底层进行回调的
- 谈 React 生命周期时,主要谈的类的生命周期,函数式组件时没有生命周期的(可以通过 hooks来模拟一些生命周期的回调)
5.7 生命周期解析
- Mounting
- constructor:生命周期里面的第一个方法
- 如果不初始化 state 或不进行方法绑定,则不需要为 React 组件实现构造函数
- constructor 中通常只做两件事情
- 通过给 this.state 赋值对象来初始化内部的 state
- 为事件绑定实例(this)
- render:第二步执行的方法,以下行为会重新执行render函数
- setState()
- new props
- forceUpdate()
- componentDidMount
- 依赖于 DOM 的操作可以在这里进行
- 在此处发送网络请求
- 此处添加一些订阅(记得在 componentWillUnmount 取消订阅)
- constructor:生命周期里面的第一个方法
- Updating
- render
- componentDidUpdate
- componentDidUpdate() 会在更新后会被立即调用,首次渲染不会执行此方法
- 当组件更新后,可以在此处对 DOM 进行操作
- 如果对更新前后的 props 进行了比较,也可以选择在此处进行网络请求(例如,当 props 未发生变化时,则不会执行网络请求)
- componentDidUpdate() 会在更新后会被立即调用,首次渲染不会执行此方法
- Unmounting
- componentWillUnmount
- componentWillUnmount() 会在组件卸载及销毁之前直接调用
- 在此方法中执行必要的清理操作
- 清除 timer,取消网络请求或清除在 componentDidMount() 中创建的订阅等
- componentWillUnmount
import React from "react";
class HelloWorld extends React.Component {
// 1. 构造方法:constructor
constructor() {
console.log("hello!这里是constructor调用");
super();
this.state = {
message: "hello world",
};
}
// 2. 执行render函数
render() {
console.log("执行render函数");
const { message } = this.state;
return (
<div>
<div>喝了咯</div>
<p>{message}</p>
</div>
);
}
// 3. 组件被渲染到DOM,挂载到DOM
componentDidMount() {
console.log("helloWorld componentDidMount");
}
// 4. 组件的DOM被更新完成:DOM发生更新
componentDidUpdate(prevProps, prevState, snapshot) {
console.log("componentDidUpdate~");
}
// 5. 组件从DOM中卸载掉:从DOM移除掉
componentWillUnmount() {
console.log(" componentWillUnmount");
}
// 不常用的生命周期补充
// 用于性能优化:
shouldComponentUpdate() {
// 决定要不要重新渲染
return false;
}
getSnapshotBeforeUpdate() {
// 返回的东西可以在componentDidUpdate中被拿到
return {
useScroll: 1000,
};
}
}
export default HelloWorld;
import React from "react";
import HelloWorld from "./HelloWorld";
class App extends React.Component{
constructor() {
super()
this.state = {
isShow:true
}
}
switchShow() {
this.setState({isShow:!this.state.isShow})
}
render() {
const { isShow} = this.state
return (
<div>
<h2>hellll</h2>
<button onClick={e => this.switchShow()}>切换</button>
{/* 为 true 才使用 */}
{isShow && <HelloWorld />}
<HelloWorld/>
</div>
)
}
}
export default App
5.8 不常用生命周期函数
- 不常用的生命周期函数
- getDerivedStateFromProps:state 的值在任何时候都依赖于 props 时使用,该方法返回一个对象来更新 state
- getSnapshotBeforeUpdate:在React更新DOM之前回调的一个函数,可以获取 DOM 更新前的一些信息(比如说滚动位置),提前保存一些数据
- shouldComponentUpdate:性能优化
- React中还提供了一些过期的生命周期函数,这些函数已经不推荐使用
- 更详细的生命周期相关的内容,参考官网:https://zh-hans.reactjs.org/docs/react-component.html
5.9 组件的嵌套
- 快捷键
- rcc:react class component
- rce:有两个导出
- rmc:生成一个 memo
- rpce
import React, { Component } from "react";
import Footer from "./c-cpns/Footer";
import Header from "./c-cpns/Header";
import Main from "./c-cpns/Main";
class App extends Component {
render() {
return (
<div className='app'>
<Header></Header>
<Main></Main>
<Footer></Footer>
</div>
);
}
}
export default App;
5.10 父组件传递子组件
- 父组件传递给子组件
- 父组件通过属性 = 值 的形式来传递给子组件数据
<MainBanner banners = {banners}></MainBanner>>
-
子组件通过 props 参数获取父组件传递过来的数据
- 父组件
import React, { Component } from "react"; import MainBanner from "./MainBanner"; import MainProduct from "./MainProduct"; import axios from 'axios' export class Main extends Component { constructor() { super(); this.state = { banners: ["新歌曲", "新MV", "新歌单"], productList: ["推荐商品", "热门商品", "流行商品"], }; } componentDidMount() { axios.get("https://").then(res => { const banners = res.data.data.banner this.setState({ banners }) }) } render() { const { banners, productList } = this.state; return ( <div> <MainBanner banners={banners}></MainBanner> <MainProduct productList={productList}></MainProduct> </div> ); } } export default Main;
- 子组件
import React, { Component } from "react"; import PropTypes from "prop-types"; export class MainBanner extends Component { // 默认值的写法 static defaultProps = { title: "默认标题", }; constructor(props) { // props是一个对象 console.log(props); super(props); // 内部相当于做了这么一个操作 // this.props = props this.state = {}; } render() { // 对数据进行解构 const { banners, title } = this.props; return ( <div className='banner'> <h2>以下是一个轮播图{title}</h2> <ul> {banners.map((item) => { return <li key={item}>{item}</li>; })} </ul> </div> ); } } MainBanner.propTypes = { banners: [], title: "默认标题", }; MainBanner.propTypes = { banners: PropTypes.array.isRequired, }; export default MainBanner;
import React, { Component } from "react";
export class MainProduct extends Component {
// 就算不写也能拿到
render() {
const { productList } = this.props;
return (
<div>
<h1>MainProduct</h1>
<ul>
{productList.map((item) => {
return <li key={item}>{item}</li>;
})}
</ul>
</div>
);
}
}
export default MainProduct;
5.11 参数propTypes
- 对于传递给子组件的数据,希望进行验证,特别是对于大型项目来说
- 当然,如果项目中默认继承了 Flow 或者 TypeScript,那么直接就可以进行类型验证
- 但是,即使没有使用Flow或者TypeScript,也可以通过 prop-types 库来进行参数验证
- 从 React v15.5 开始,React.PropTypes 已移入另一个包中:prop-types 库更多的验证方式,可以参考官网:https://zh-hans.reactjs.org/docs/typechecking-with-proptypes.html
- 比如验证数组,并且数组中包含哪些元素
- 比如验证对象,并且对象中包含哪些key以及value是什么类型
- 比如某个原生是必须的,使用 requiredFunc: PropTypes.func.isRequired 如果没有传递,希望有默认值,使用 defaultProps 就可以了
// 给对应的包起一个名字
import PropTypes from "prop-types";
// 对象
MainBanner.propTypes = {
banners: [],
title: "默认标题",
};
MainBanner.propTypes = {
// 连续约束
banners: PropTypes.array.isRequired,
title:PropTypes.string
};
- 默认值的写法
MainBanner.propTypes = {
banners: [],
title: "默认标题",
};
// 默认值的写法:写在类里面
static defaultProps = {
title: "默认标题",
};
5.12 子组件传递父组件
-
给子组件传入函数
-
子组件传递父组件:点击了子组件,需要改变父组件的数据
- vue 是通过自定义事件完成的
- react 是通过 props 传递消息的,在子组件中封装对应的方法,调用父组件传递过来的回调函数(对应改变了父组件中的数据)
- 函数也是可以通过 props 传递给子组件的
-
解构语法:
dob
-
父组件
import React, { Component } from "react";
import AddCounter from "./AddCounter";
import SubCounter from "./SubCounter";
export class App extends Component {
constructor() {
super();
this.state = {
counter: 100,
};
}
changeCounter(count) {
this.setState({ counter: this.state.counter + count });
}
render() {
// dob
const { counter } = this.state;
return (
<div>
<h1>当前计数:{counter}</h1>
{/* 给子组件传递一个函数 */}
<AddCounter addClick={(count) => this.changeCounter(count)}></AddCounter>
<SubCounter subClick={(count) => this.changeCounter(count)}></SubCounter>
</div>
);
}
}
export default App;
- 子组件
import React, { Component } from "react";
import PropTypes from "prop-types";
export class AddCounter extends Component {
AddCount(count) {
console.log("+", count);
//传递事件到父组件:
// vue
// this.$emit();
// 小程序
// this.triggerEvent();
// react
// 1. 取出这个函数
// const click = this.props.addClick;
// click();
// 2. 直接进行调用
this.props.addClick(count)
}
render() {
return (
<div>
<button onClick={(e) => this.AddCount(1)}>+1</button>
<button onClick={(e) => this.AddCount(5)}>+5</button>
<button onClick={(e) => this.AddCount(10)}>+10</button>
</div>
);
}
}
// 对类型进行校验,规定为函数类型
AddCounter.propTypes = {
addClick: PropTypes.func,
};
export default AddCounter;
import React, { Component } from "react";
export class SubCounter extends Component {
SubCounter(count) {
console.log("-", count);
this.props.subClick(count);
}
render() {
return (
<div>
<button onClick={(e) => this.SubCounter(-1)}>-1</button>
<button onClick={(e) => this.SubCounter(-5)}>-5</button>
<button onClick={(e) => this.SubCounter(-10)}>-10</button>
</div>
);
}
}
export default SubCounter;
5.13 组件通信案例
import React, { Component } from "react";
import TabControl from "./TabControl/index";
export class App extends Component {
constructor() {
super();
this.state = {
titles: ["流行", "新款", "精选"],
tabIndex: 0,
};
}
tabClick(index) {
this.setState({
tabIndex:index
})
}
render() {
const { titles, tabIndex } = this.state;
return (
<div className='app'>
<TabControl titles={titles} tabClick={i=>this.tabClick(i)}></TabControl>
<h1>{titles[tabIndex]}</h1>
</div>
);
}
}
import React, { Component } from "react";
import "./style.css";
export class TabControl extends Component {
constructor() {
super();
this.state = {
currentIndex: 0,
};
}
itemClick(index) {
// console.log(index);
this.setState({
currentIndex: index,
});
this.props.tabClick(index)
}
render() {
const { titles } = this.props;
const { currentIndex } = this.state;
return (
<div className='tab-control'>
{titles.map((item, index) => {
return (
<div className={`item ${currentIndex === index ? "active" : ""}`} key={item} onClick={(e) => this.itemClick(index)}>
<span className='text'> {item}</span>
</div>
);
})}
</div>
);
}
}
export default TabControl;
5.14 React中的插槽(slot)
- 组件当中以什么样的形式对数据进行显示
- react中不需要插槽!!!但是可以通过很多种形式实现插槽的效果
- 可以通过组件的 children子元素 或 props 属性传递任意 react 元素
5.15 children方案实现
- children 子元素:放在双标签里面
import React, { Component } from "react";
import "./style.css";
export class NavBar extends Component {
// 父组件传递多个的时候,子组件拿到的是数组children
// 父组件只传递一个的时候,子组件拿到的就是一个元素,children===元素-
render() {
const { children } = this.props;
return (
<div className='nav-bar'>
<div className='left'>{children[0]}</div>
<div className='center'>{children[1]}</div>
<div className='right'>{children[2]}</div>
</div>
);
}
}
NavBar.propTypes = {
// 限制父组件只能传一个,要求是一个元素
// children: PropTypes.element,
// 限制父组件传入多个
children: PropTypes.array,
};
export default NavBar;
import React, { Component } from "react";
import NavBar from "./nav-bar";
export class App extends Component {
render() {
return (
// 这样写将children放在了NavBar实例的this.props.children之中
// const els = this.props.children
// 是一个数组
<div>
<NavBar>
<button>button</button>
<h2>h2</h2>
<i>i</i>
</NavBar>
</div>
);
}
}
export default App;
- 缺点
- 必须知道索引,对顺序要求过高
- 需要区分传入多个(数组)、一个值(element)
5.16 props 实现方案
- 直接传元素
import React, { Component } from "react";
import NavBar from "./nav-bar1";
import NavBar2 from "./nav-bar2";
export class App extends Component {
render() {
return (
<div>
{/* 2. 使用props实现插槽 */}
<NavBar2 leftSlot={<button>button2</button>} centerSlot={<h2>hehhhh</h2>} rightSlot={<i>i2</i>} />
</div>
);
}
}
export default App;
import React, { Component } from "react";
export class NavBar2 extends Component {
render() {
const { leftSlot, centerSlot, rightSlot } = this.props;
return (
<div className='nav-bar'>
<div className='left'>{leftSlot}</div>
<div className='center'>{centerSlot}</div>
<div className='right'>{rightSlot}</div>
</div>
);
}
}
export default NavBar2;
5.17 作用域插槽
- 父组件给子组件传递过去一大堆数据,子组件用了我的数据,但是你不确定展示形式,需要父组件传递插槽
- 在父组件中编写插槽,eg
button
,拿不到子组件的数据了 - 数据是使用子组件的
- 在父组件中编写插槽,eg
- 作用域插槽:组件的标签由父组件决定,但是用的数据是子组件传过来的
import React, { Component } from "react";
import TabControl from "./TabControl/index";
export class App extends Component {
constructor() {
super();
this.state = {
titles: ["流行", "新款", "精选"],
tabIndex: 0,
};
}
tabClick(index) {
this.setState({
tabIndex: index,
});
}
//根据不同的名字返回不同的东西
getTabItem(item) {
if (item === "流行") {
return <span>{item}</span>;
} else if (item === "新款") {
return <button>{item}</button>;
} else {
return <i>{item}</i>;
}
}
render() {
const { titles, tabIndex } = this.state;
return (
<div className='app'>
<TabControl
titles={titles}
tabClick={(i) => this.tabClick(i)}
// itemType={(item) => <button>{item}
// </button>}
itemType={(item) => this.getTabItem(item)}></TabControl>
<h1>{titles[tabIndex]}</h1>
</div>
);
}
}
export default App;
import React, { Component } from "react";
import "./style.css";
export class TabControl extends Component {
constructor() {
super();
this.state = {
currentIndex: 0,
};
}
itemClick(index) {
// console.log(index);
this.setState({
currentIndex: index,
});
this.props.tabClick(index)
}
render() {
const { titles,itemType } = this.props;
const { currentIndex } = this.state;
return (
<div className='tab-control'>
{titles.map((item, index) => {
return (
<div className={`item ${currentIndex === index ? "active" : ""}`} key={item} onClick={(e) => this.itemClick(index)}>
{/* <span className='text'> {item}</span> */}
{itemType(item)}
</div>
);
})}
</div>
);
}
}
export default TabControl;
5.18 Context 应用场景
- 非父子组件数据的共享
- 在开发中,比较常见的数据传递方式是通过 props 属性自上而下(由父到子)进行传递
- 但是对于有一些场景:比如一些数据需要在多个组件中进行共享(地区偏好、UI主题、用户登录状态、用户信息等)
- 如果在顶层的App中定义这些信息,之后一层层传递下去,那么对于一些中间层不需要数据的组件来说,是一种冗余的操作:
...this.props
- 实现一个一层层传递的案例:
- 顺便补充:Spread Attributes(直接展开传递)
import React, { Component } from "react";
import Home from "./Home";
export class App extends Component {
constructor() {
super();
this.state = {
info: {
name: "lili",
age: 18,
},
};
}
render() {
const { info } = this.state;
return (
<div>
<h2>App</h2>
<Home name='lili' age={18}></Home>
<Home name={info.name} age={info.age} />
{/* 直接展开 */}
<Home {...info} />
</div>
);
}
}
export default App;
import React, { Component } from 'react'
export class Home extends Component {
render() {
const {name,age} = this.props
return (
<div>
<h2>Home:{name}-{ age}</h2>
</div>
)
}
}
export default Home
- 但是,如果层级更多的话,一层层传递是非常麻烦,并且代码是非常冗余的
- React 提供了一个API:Context
- Context 提供了一种在组件之间共享此类值的方式,而不必显式地通过组件树的逐层传递 props
- Context 设计目的是为了共享那些对于一个组件树而言是**“全局”的数据**,例如当前认证的用户、主题或首选语言
5.19 使用 Context 步骤
- 创建一个 Context:建立一个文件夹
import React from "react";
// 1. 创建一个Context
const ThemeContext = React.createContext();
export default ThemeContext
- 提供数据的组件:通过 Context 中的 Provider 中的 value 属性为后代提供数据
import React, { Component } from 'react'
import HomeInfo from './HomeInfo'
export class Home extends Component {
render() {
const {name,age} = this.props
return (
<div>
<h2>Home:{name}-{age}</h2>
<HomeInfo></HomeInfo>
</div>
)
}
}
export default Home
- 中间件
import React, { Component } from 'react'
import HomeBanner from './HomeBanner'
import HomeInfo from './HomeInfo'
export class Home extends Component {
render() {
const {name,age} = this.props
return (
<div>
<h2>Home:{name}-{age}</h2>
<HomeInfo></HomeInfo>
<HomeBanner></HomeBanner>
</div>
)
}
}
export default Home
- 接收数据的组件(类组件):设置组件的 contextType 的类型为某一个 Context
import React, { Component } from 'react'
import ThemeContext from './context/theme-context'
export class HomeInfo extends Component {
render() {
return (
<div>HomeInfo:{ this.context.color}</div>
)
}
}
HomeInfo.contextType = ThemeContext
export default HomeInfo
- 接收数据的组件(函数式组件)
import ThemeContext from "./context/theme-context";
function HomeBanner() {
return (
<div>
<h1>HomeBanner</h1>
{/* 函数式组件使用 Context 共享的数据:消费者 */}
{/* flutter 就是参考它 */}
<ThemeContext.Consumer>
{/* 传入一个回调函数 */}
{(value) => {
return <h2>{value.color}</h2>;
}}
</ThemeContext.Consumer>
</div>
);
}
export default HomeBanner;
- 多个组件
import React, { Component } from "react";
import Home from "./Home";
import ThemeContext from "./context/user-context";
import UserContext from "./context/user-context";
export class App extends Component {
constructor() {
super();
this.state = {
info: {
name: "lili",
age: 18,
},
};
}
render() {
const { info } = this.state;
return (
<div>
<h2>App</h2>
{/* 1. 给 Home 传递数据*/}
{/* <Home name='lili' age={18}></Home>
<Home name={info.name} age={info.age} /> */}
{/* 直接展开 */}
{/* <Home {...info} /> */}
{/* 2. 普通的 Home */}
{/* <Home {...info} /> */}
{/* 需要把它包裹起来 */}
<UserContext.Provider value={{ nickname: "环环紧扣",age:23 }}>
<ThemeContext.Provider value={{ color: "red", size: 30 }}>
<Home {...info} />
</ThemeContext.Provider>
</UserContext.Provider>
</div>
);
}
}
export default App;
import React, { Component } from "react";
import UserContext from "./context/user-context";
import ThemeContext from "./context/user-context";
export class HomeInfo extends Component {
render() {
return (
<div>
<h2>HomeInfo:{this.context.color}</h2>
<UserContext.Consumer>
{(value) => {
return <h2>User:{value.nickname}</h2>;
}}
</UserContext.Consumer>
</div>
);
}
}
// Context 类型只能设置一个
HomeInfo.contextType = ThemeContext;
export default HomeInfo;
5.20 Context 相关API
-
React.createContext
- 创建一个需要共享的 Context 对象
- 如果一个组件订阅了Context,那么这个组件会从离自身最近的那个匹配的 Provider 中读取到当前的 context 值
- defaultValue是组件在顶层查找过程中没有找到对应的Provider,那么就使用默认值
-
Context.Provider
- 每个 Context 对象都会返回一个 Provider React 组件,它允许消费组件订阅 context 的变化
- Provider 接收一个 value 属性,传递给消费组件
- 一个 Provider 可以和多个消费组件有对应关系
- 多个 Provider 也可以嵌套使用,里层的会覆盖外层的数据
- 当 Provider 的 value 值发生变化时,它内部的所有消费组件都会重新渲染
-
Class.contextType
- 挂载在 class 上的 contextType 属性会被重赋值为一个由 React.createContext() 创建的 Context 对象
- 使用 this.context 来消费最近 Context 上的那个值
- 可以在任何生命周期中访问到它,包括 render 函数中
-
Context.Consumer
- 这里,React 组件也可以订阅到 context 变更。这能让你在 函数式组件 中完成订阅 context
- 这里需要 函数作为子元素(function as child)这种做法
- 这个函数接收当前的 context 值,返回一个 React 节点
-
繁琐,一般使用 redux 进行状态管理
-
子组件不放在父组件提供的数据组件里面,又想使用这个数据,怎么使用
- 给 Context 设置一个默认值
import React from "react"; // 1. 创建一个Context const ThemeContext = React.createContext({color:"blue"}); export default ThemeContext
- 子组件使用
import React, { Component } from "react"; import ThemeContext from "./context/theme-context"; export class Profile extends Component { render() { console.log(this.context); return <div>Profile</div>; } } Profile.contextType = ThemeContext; export default Profile;
-
什么时候使用 Context.Consumer
- 当使用value的组件是一个函数式组件时
- 当组件中需要使用多个 Context 时
5.21 使用 setState 原因
-
对比
- vue 中:template = 》 render
- react 中:render = 》React.createElement(“div”,{},children)
- 只有调用 setState 的时候,render 函数才会被重新执行
-
react 没有做数据劫持
-
开发中并不能直接通过修改state的值来让界面发生更新
- 因为修改了state之后,希望 React 根据最新的State来重新渲染界面,但是这种方式的修改React 并不知道数据发生了变化
- React 并没有实现类似于 Vue2 中的 Object.defineProperty 或者 Vue3 中的 Proxy 的方式来监听数据的变化
- 必须通过 setState 来告知 React 数据已经发生了变化
-
在组件中并没有实现 setState 的方法,为什么可以 this.setState 调用呢
- setState方法是从 Component 中继承过来的
5.22 setState 异步更新
- setState 的更新是异步的
- 最终打印结果是 Hello World
- 可见 setState 是异步的操作,并不能在执行完 setState 之后立马拿到最新的 state 的结果
setState
的三种写法
import React, { Component } from "react";
export class App extends Component {
constructor() {
super();
this.state = {
message: "hello world",
counter: 0,
};
}
changeText() {
// 1. setState 的更多用法
// 1.1 基本使用:其实是创建了一个新对象
// Object.assign(this.state.newState) 进行合并
// this.setState({
// message:"你好呀,lili"
// })
// 1.2 setState 可以传入一个回调函数
// 好处一:可以在回调函数中编写新的 state 的逻辑
// 好处二:当前的回调函数会将之前的state 和 props 传递进来
// this.setState((state,props) => {
// // 1.2.1编写一些对新的state的处理逻辑
// // 1.2.2可以获取之前的state 和 props 值
// return {
// message: "hhh",
// };
// });
// 1.3 setState 在 React 的事件处理中是一个异步调用(等一会再合并)
// 如果希望在数据更新之后(数据合并),获取到对应的结果执行一些逻辑代码==>在 setState 中传入第二个参数:callback
this.setState({
message:"你好呀,李里"
}, () => {
console.log(this.state.message);
})
}
render() {
const { message, counter } = this.state;
return (
<div>
<h1>message:{message}</h1>
<button onClick={(e) => this.changeText()}>修改本文</button>
<h1>counter:{counter}</h1>
<button onClick={(e) => this.increment()}>counter+1</button>
</div>
);
}
}
export default App;
- 为什么 setState 设计为异步
- setState 设计为异步其实之前在 GitHub 上也有很多的讨论
- React 核心成员( Redux 的作者)Dan Abramov 也有对应的回复
- https://github.com/facebook/react/issues/11527#issuecomment-360199710
- 简单的总结:
-
setState设计为异步,可以显著的提升性能
- 如果每次调用 setState 都进行一次更新,那么意味着 render 函数会被频繁调用,界面重新渲染,这样效率是很低的
- 最好的办法应该是获取到多个更新,之后进行批量更新
-
如果同步更新了state,但是还没有执行 render 函数,那么 state 和 props 不能保持同步
- state 和 props 不能保持一致性,数据错误混乱,会在开发中产生很多的问题
-
import React, { Component } from "react";
export class App extends Component {
constructor() {
super();
this.state = {
message: "hello world",
counter: 0,
};
}
changeText() {
this.setState({
message: "你好呀",
});
console.log(this.state.message);
}
increment() {
// this.setState({
// counter: this.state.counter + 1,//0 + 1
// }); //不更新,先加入到队列里面,把里面的内容依次处理,先进先出,处理完了,再合并更新 do while 循环
// this.setState({
// counter: this.state.counter + 1,//0 + 1
// });
// this.setState({
// counter: this.state.counter + 1,//0 + 1
// });
// 这样拿到的是最新的state进行回调
this.setState((state) => {
console.log(this.state.count); //没有改,不推荐这样做
return {
counter: state.counter + 1,
};
});
this.setState((state) => {
console.log(this.state.count);
return {
counter: state.counter + 1,
};
});
this.setState((state) => {
console.log(this.state.count);
return {
counter: state.counter + 1,
};
});
}
//为一: 间接证明了是异步
render() {
const { message, counter } = this.state;
return (
<div>
<h1>message:{message}</h1>
<button onClick={(e) => this.changeText()}>修改本文</button>
<h1>counter:{counter}</h1>
<button onClick={(e) => this.increment()}>counter+1</button>
</div>
);
}
}
export default App;
5.23 setState(React18之前)
- 分不同的情况,React18 之前对于 setState 都是进行异步处理,有一些特殊的情况会变成同步的
- promise 事件回调
- setTimeout
- 原生 DOM 事件
import React, { Component } from "react";
export class App extends Component {
constructor() {
super();
this.state = {
message: "hello world",
counter: 0,
};
}
changeText() {
// 在 react 18 之前,setTimeout 中的 setState 操作,这个代码是同步的代码
// 在 react 18 之后,setTimeout 中的 setState 是异步操作(批处理)
setTimeout(() => {
this.setState({
message: "你好呀理理",
});
console.log(this.state.message);
}, 0);
}
increment() {}
//为一: 间接证明了是异步
render() {
const { message, counter } = this.state;
return (
<div>
<h1>message:{message}</h1>
<button onClick={(e) => this.changeText()}>修改本文</button>
<h1>counter:{counter}</h1>
<button onClick={(e) => this.increment()}>counter+1</button>
</div>
);
}
}
export default App;
- 在组件生命周期或 React合成事件中,setState是异步;在setTimeout或者原生dom事件中,setState是同步
5.24 setState(React18 之后)
- 在 React18 之后,默认所有的操作都被放到了批处理中(异步处理)
- 如果希望代码可以同步拿到,则需要执行特殊的 **flushSync **操作
六、React组件化开发(二)
6.1 React更新机制
- React 的渲染流程: JSX == > 虚拟DOM ==> 真实DOM
- React 的更新流程:
- props/state 改变
- render 函数重新执行
- 产生新的 DOM 树
- 新旧 DOM 树进行 diff
- 计算出差异进行更新
- 更新到真实的 DOM
6.2 React 的更新流程
- React 在 props 或 state 发生改变时,会调用 React 的 render 方法,会创建一棵不同的树
- React 需要基于这两棵不同的树之间的差别来判断如何有效的更新 UI
- 如果一棵树参考另外一棵树进行完全比较更新,那么即使是最先进的算法,该算法的复杂程度为 O( n3 ),其中 n 是树中元素的数量
- https://grfia.dlsi.ua.es/ml/algorithms/references/editsurvey_bille.pdf
- 如果在 React 中使用了该算法,那么展示 1000 个元素所需要执行的计算量将在十亿的量级范围
- 这个开销太过昂贵了,React 的更新性能会变得非常低效
- 于是,React 对这个算法进行了优化,将其优化成了 O(n),如何优化的呢?
- 同层节点之间相互比较,不会跨节点比较
- 不同类型的节点,产生不同的树结构
- 开发中,可以通过 key 来指定哪些节点在不同的渲染下保持稳定
6.3 keys的优化
- 在前面遍历列表时,总是会提示一个警告:加入一个 key 属性
- 方式一:在最后位置插入数据
- 这种情况,有无 key 意义并不大
- 方式二:在前面插入数据
- 这种做法,在没有 key 的情况下,所有的 li 都需要进行修改
- 当子元素(这里的li)拥有 key 时,React 使用 key 来匹配原有树上的子元素以及最新树上的子元素
- 在下面这种场景下,key 为 111 和 222 的元素仅仅进行位移,不需要进行任何的修改
- 将 key 为 333 的元素插入到最前面的位置即可
- key 的注意事项:
- key 应该是唯一的
- key 不要使用随机数(随机数在下一次render时,会重新生成一个数字)
- 使用 index 作为key,对性能是没有优化的
- 中间插入东西,index 会改变
- 只能消除警告
6.4 render 函数被调用
- 使用之前的一个嵌套案例:
- 在 App 中,增加了一个计数器的代码
- 当点击 +1 时,会重新调用 App 的 render 函数
- 而当 App 的 render 函数被调用时,所有的子组件的 render 函数都会被重新调用
- 如果在以后的开发中,只要是修改了**App 中的数据,**所有的组件都需要重新render,进行 diff算法性能必然是很低的
- 事实上,很多的组件没有必须要重新 render
- 它们调用 render 应该有一个前提,就是依赖的数据(state、props)发生改变时,再调用自己的 render方法
- 如何来控制 render 方法是否被调用呢?
- shouldComponentUpdate
6.5 ShouldComponentUpdate
-
React 提供了一个生命周期方法 shouldComponentUpdate(很多时候,简称为 SCU ),这个方法接受参数,并且需要有
返回值:
-
该方法有两个参数:
- 参数一:nextProps 修改之后,最新的 props 属性
- 参数二:nextState 修改之后,最新的 state 属性
-
该方法返回值是一个 boolean 类型:
- 返回值为 true,那么就需要调用 render 方法
- 返回值为 false,那么久不需要调用 render 方法
- 默认返回的是 true,也就是只要 state 发生改变,就会调用 render 方法
-
比如在 App 中增加一个 message 属性:
- jsx 中并没有依赖这个 message,那么它的改变不应该引起重新渲染
- 但是因为 render 监听到 state 的改变,就会重新 render,所以最后 render 方法还是被重新调用了
6.6 render 函数的优化
-
优化点
- App 不重新渲染子组件
- App 不重新渲染相同的内容
- 加判断条件
-
一个组件到底要不要重新渲染需要看 props 和 state 是否发生改变
import React, { Component } from "react";
import Home from "./Home";
import Recommend from "./Recommend";
export class App extends Component {
constructor() {
super();
this.state = {
message: "hello world",
counter: 88,
};
}
shouldComponentUpdate(newProps, newState) {
if (newState.message !== this.state.message || newState.counter !== this.state.counter) {
return true;
}
return false;
}
changeText() {
this.setState({
message: "你好呀",
// message: "hello world",
});
}
changeCounter() {
this.setState({
counter: this.state.counter + 88,
});
}
render() {
console.log("App render");
const { message, counter } = this.state;
return (
<div>
<h1>
App-{message}-{counter}
</h1>
<button onClick={(e) => this.changeText()}>changeText</button>
<button onClick={(e) => this.changeCounter()}>change counter + 88</button>
<Home message={message}></Home>
<Recommend counter = {counter}></Recommend>
</div>
);
}
}
export default App;
import React, { Component } from "react";
export class Home extends Component {
shouldComponentUpdate(newProps, newState) {
if (newProps.message !== this.props.message) {
return true
}
return false;
}
render() {
console.log("Home render");
return (
<div>
<h2>Home-page</h2>
<h2>Home-page-{this.props.message}</h2>
</div>
);
}
}
export default Home;
import React, { Component } from "react";
export class Recommend extends Component {
shouldComponentUpdate(newProps, newState) {
if (newProps.counter !== this.props.counter) {
return true;
}
return false;
}
render() {
console.log("Recommend render");
return (
<div>
<h2>Recommend-page</h2>
<h2>Recommend-page-{this.props.counter}</h2>
</div>
);
}
}
export default Recommend;
6.7 PureComponent
- 不想自己写判断
- 如果所有的类,都需要手动来实现 shouldComponentUpdate,那么会给开发者增加非常多的工作量。
- 来设想一下 shouldComponentUpdate 中的各种判断的目的是什么
- props 或者 state 中的数据是否发生了改变,来决定 shouldComponentUpdate 返回 true 或者 false
- 事实上 React 已经考虑到了这一点,所以 React 已经默认帮我们实现好了,如何实现呢?
- 将 class 继承自 PureComponent
- 本质进行了一层浅层比较
- 只比较第一层,不比较深层
6.8 高阶组件 memo
- 那函数式组件怎么办呢
- 高阶函数
memo
- 判断是否需要重新渲染,重新生成一个组件
- 高阶函数
import { memo } from "react";
const Profile = memo(function Profile(props) {
console.log("profile render");
return <h2>{props.message}</h2>;
});
export default Profile;
6.9 数据不可变的力量
- 当继承自 PureComponent 的时候,这样设置并不能进行更新,界面没有进行刷新
- PureComponent 在底层实现 shouldComponentUpdate 是使用浅层比较
- 源码实现方法
checkShouldComponentsUnpdate
- Object.is 方法:判断两个对象是不是同一个对象
- 会对 this.state.books 和 newState 中的 books 进行比较,发现两者是同一个,并不能生效
- 因此不要直接修改 state ,而是重新设置一个对象
addBook() {
const newBook = { name: "hhhhh", price: 99, count: 99999 };
this.state.books.push(newBook);
this.setState({ books: this.state.books });
}
- 对象类型要改变就去拷贝一份,让它重新指向一份新的内存
import React, { PureComponent } from "react";
export class App extends PureComponent {
constructor() {
super();
this.state = {
books: [
{ name: "lili", price: 99, count: 99 },
{ name: "hhhhh", price: 99, count: 999 },
{ name: "libing", price: 99, count: 9999 },
],
};
}
// shouldComponentUpdate(nextProps,nextState) {
// shallowEqual(nextProps,this.props)
// shallowEqual(nextState, this.state)
// }
addBook() {
const newBook = { name: "hhhhh", price: 99, count: 99999 };
// 1. 直接修改原有的 state,重新设置一遍
// 在 PureComponents 是不能引起重新渲染的(re-render)
// 2. 复制一份books,在新的books中修改,设置新的books
// this.state.books.push(newBook);
const books = [...this.state.books];
books.push(newBook);
//要把整个数据都修改掉
this.setState({ books: books });
}
addBookCount(index) {
// 因为是浅层比较,数组中的对象指向的同一份内存,本质上是一样的
//1. this.state.books[index].count++
//2. 保证一定会执行 render 函数
const books = [...this.state.books];
books[index].count++;
this.setState({ books: books });
}
render() {
const { books } = this.state;
return (
<div>
<h1>数据列表</h1>
<ul>
{books.map((item, index) => {
return (
<li key={index}>
name:{item.name}-price:{item.price}-count:{item.count}
<button onClick={(e) => this.addBookCount(index)}>+1</button>
</li>
);
})}
</ul>
<button onClick={(e) => this.addBook()}>addBook</button>
</div>
);
}
}
export default App;
6.10 使用ref
- 在 React 的开发模式中,通常情况下不需要、也不建议直接操作 DOM 原生,但是某些特殊的情况,确实需要获取到 DOM 进行某些操作:
- 管理焦点,文本选择或媒体播放
- 触发强制动画
- 集成第三方 DOM 库
- 可以通过 refs 获取 DOM
- 如何创建 refs 来获取对应的DOM呢?目前有三种方式:
- 方式一:传入字符串
- 使用时通过 this.refs. 传入的字符串格式获取对应的元素
- 废弃了
- 方式二:传入一个对象
- 对象是通过 React.createRef() 方式创建出来的
- 使用时获取到创建的对象其中有一个 current 属性就是对应的元素
- 方式三:传入一个函数
- 该函数会在 DOM 被挂载时进行回调,这个函数会传入一个 元素对象,可以自己保存
- 使用时,直接拿到之前保存的元素对象即可
- 方式一:传入字符串
- 获取原生 DOM
import React, { PureComponent, createRef } from "react";
export class App extends PureComponent {
constructor() {
super();
this.state = {};
this.titleRef = createRef();
this.titleEl = null;
}
getNativeDOM() {
// 0. 只能获取第一个,强烈不推荐
// const h2El = document.querySelector('h2')
// 1. 方式一:在 React 元素上绑定一个 ref 字符串
// console.log(this.ref.lili);
// 2. 方式二:提前创建好 ref 对象,createRef(),将创建出来的对象绑定到元素
// console.log(this.titleRef.current);
// 3. 方式三:传入一个回调函数,在对应的元素被渲染之后,回调函数被执行,并且将元素传入
console.log(this.titleEl);
}
render() {
return (
<div>
<h2 ref='lili'>喝了咯 world</h2>
<h2 ref={this.titleRef}>你好啊</h2>
<h2 ref={(el) => (this.titleEl = el)}>你好嘞</h2>
<button onClick={(e) => this.getNativeDOM()}>获取 DOM</button>
</div>
);
}
}
export default App;
- 获取类组件
- 子组件实例:
console.log(this.hwRef.current)
- 调用子组件方法
- 子组件实例:
import React, { PureComponent, createRef } from "react";
class HelloWorld extends PureComponent {
test() {
console.log("========test=========");
}
render() {
return <h1>hello world</h1>;
}
}
export class App extends PureComponent {
constructor() {
super();
this.state = {};
this.hwRef = createRef();
}
getComponent() {
console.log(this.hwRef.current);
this.hwRef.current.test()
}
render() {
return (
<div>
<HelloWorld ref={this.hwRef}></HelloWorld>
<button onClick={(e) => this.getComponent()}>获取组件实例</button>
</div>
);
}
}
export default App;
- 获取函数式组件中某一个元素
- 获取不到函数组件实例
- 创建的 hwRef 通过 forwardRef 函数传给了函数组件的内部元素
import React, { PureComponent, createRef,forwardRef } from "react";
const HelloWorld = forwardRef(function(props,ref) {
return (
<div>
<h1 ref={ref}>hello world</h1>
</div>
);
})
export class App extends PureComponent {
constructor() {
super();
this.state = {};
this.hwRef = createRef();
}
getComponent() {
console.log(this.hwRef.current);
}
render() {
return (
<div>
<HelloWorld ref={this.hwRef}></HelloWorld>
<button onClick={(e) => this.getComponent()}>获取组件实例</button>
</div>
);
}
}
export default App;
6.11 ref 的类型
- ref 的值根据节点的类型而有所不同:
- 当 ref 属性用于 HTML 元素时,构造函数中使用 React.createRef() 创建的 ref 接收底层 DOM 元素作为其 current 属性
- 当 ref 属性用于自定义 class 组件时,ref 对象接收组件的挂载实例作为其 current 属性
- 函数式组件是没有实例的,所以无法通过 ref 获取他们的实例
- 但是某些时候,可能想要获取函数式组件中的某个 DOM 元素
- 这个时候可以通过 React.forwardRef ,也可以使用 hooks 中提供的 useRef
6.12 受控组件
- 受控组件:在React中,HTML表单的处理方式和普通的DOM元素不太一样:表单元素通常会保存在一些内部的state
- 比如下面的HTML表单元素:
- 这个处理方式是DOM默认处理HTML表单的行为,在用户点击提交时会提交到某个服务器中,并且刷新页面
- 在React中,并没有禁止这个行为,它依然是有效的
- 但是通常情况下会使用JavaScript函数来方便的处理表单提交,同时还可以访问用户填写的表单数据
- 实现这种效果的标准方式是使用“受控组件”
- 一般都会把 input 设置成受控组件
- 要改变输入框的值,必须设置:
onChange={e => this.inputChange(e)}
import React, { PureComponent } from 'react'
export class App extends PureComponent {
constructor() {
super()
this.state={
username:'li'
}
}
inputChange(event) {
// 这里的 e 不是原生的 e,是 react 做了一层包裹
console.log(event.target.value);
this.setState({username:event.target.value})
}
render() {
const {username} = this.state
return (
<div>
{/* 受控组件 */}
<input type="text" value={username} onChange={e => this.inputChange(e)} />
{/* 非受控组件 */}
<input type="text" />
<h2>username:{ username}</h2>
</div>
)
}
}
export default App
6.13 自己提交 form 表单
import React, { PureComponent } from "react";
export class App extends PureComponent {
constructor() {
super();
this.state = {
username: "游刃有余e",
};
}
inputChange(event) {
// 这里的 e 不是原生的 e,是 react 做了一层包裹
console.log(event.target.value);
this.setState({ username: event.target.value });
}
handleSubmitClick(event) {
// 1. 阻止默认的行为
event.preventDefault();
// 2. 获取到所有的表单数据,对数据进行操作
console.log("获取所有的输入内容");
console.log(this.state.username);
// 3. 以网络请求的方式,将数据传递给服务器(ajax/fetch/axios)
}
render() {
const { username } = this.state;
return (
<div>
<form onSubmit={(e) => this.handleSubmitClick(e)}>
{/* 1. 用户名和密码 */}
<label htmlFor='username'>
用户:
<input id='username' type='text' name='username' value={username} onChange={(e) => this.inputChange(e)} />
</label>
<button type='submit'>注册 </button>
</form>
</div>
);
}
}
export default App;
6.14 多个表单同一个函数
import React, { PureComponent } from "react";
export class App extends PureComponent {
constructor() {
super();
this.state = {
username: "游刃有余e",
password:''
};
}
// handleUsernameChange(event) {
// // 这里的 e 不是原生的 e,是 react 做了一层包裹
// console.log(event.target.value);
// this.setState({ username: event.target.value });
// }
// handlePasswordChange(event) {
// // 这里的 e 不是原生的 e,是 react 做了一层包裹
// console.log(event.target.value);
// this.setState({ password: event.target.value });
// }
handleSubmitClick(event) {
// 1. 阻止默认的行为
event.preventDefault();
// 2. 获取到所有的表单数据,对数据进行操作
console.log("获取所有的输入内容");
console.log(this.state.username,this.state.password);
// 3. 以网络请求的方式,将数据传递给服务器(ajax/fetch/axios)
}
handleInputChange(event) {
// event.target 拿到元素
// 拿到绑定的 name
// const keyName = event.target.name
// this.setState({
// [keyName]:event.target.value
// })
// 简写
this.setState({
[event.target.name]:event.target.value
})
}
render() {
const { username,password } = this.state;
return (
<div>
<form onSubmit={(e) => this.handleSubmitClick(e)}>
{/* 1. 用户名和密码 */}
<label htmlFor='username'>
用户:
<input id='username' type='text' name='username' value={username} onChange={(e) => this.handleInputChange(e)} />
</label>
<label htmlFor='password'>
密码:
<input id='password' type='password' name='password' value={password} onChange={(e) => this.handleInputChange(e)} />
</label>
<button type='submit'>注册 </button>
</form>
</div>
);
}
}
export default App;
6.15 checkbox 单选多选
import React, { PureComponent } from "react";
export class App extends PureComponent {
constructor() {
super();
this.state = {
username: "li",
password: "",
isAgree: true,
hobbies: [
{ value: "sing", text: "唱", isChecked: false },
{ value: "dance", text: "跳", isChecked: false },
{ value: "rap", text: "rap", isChecked: false },
],
};
}
handleSubmitClick(event) {
// 1. 阻止默认的行为
event.preventDefault();
// 2. 获取到所有的表单数据,对数据进行操作
console.log("获取所有的输入内容");
console.log(this.state.username, this.state.password);
console.log("获取爱好");
console.log(this.state.hobbies.filter((item) => item.isChecked).map((item) => item.value));
// 3. 以网络请求的方式,将数据传递给服务器(ajax/fetch/axios)
}
handleInputChange(event) {
this.setState({
[event.target.name]: event.target.value,
});
}
handleAgreeChange(event) {
this.setState({ isAgree: event.target.checked });
}
handleHobbiesChange(event, index) {
const hobbies = [...this.state.hobbies];
hobbies[index].isChecked = event.target.checked;
this.setState({ hobbies });
}
render() {
const { username, password, isAgree, hobbies } = this.state;
return (
<div>
<form onSubmit={(e) => this.handleSubmitClick(e)}>
<div>
{/* 1. 用户名和密码 */}
<label htmlFor='username'>
用户:
<input id='username' type='text' name='username' value={username} onChange={(e) => this.handleInputChange(e)} />
</label>
<label htmlFor='password'>
密码:
<input id='password' type='password' name='password' value={password} onChange={(e) => this.handleInputChange(e)} />
</label>
</div>
{/* 2. checkbox */}
<label htmlFor='agree'>
<input type='checkbox' id='agree' checked={isAgree} onChange={(e) => this.handleAgreeChange(e)} />
同意协议
</label>
{/* 3. checkbox 多选 */}
<div>
爱好:
{hobbies.map((item, index) => {
return (
<label htmlFor={item.value} key={item.value}>
<input type='checkbox' id={item.value} checked={item.isChecked} onChange={(e) => this.handleHobbiesChange(e, index)} />
{item.text}
</label>
);
})}
</div>
{/* 4. select 元素 */}
{/* 不是默认提交的话,可以没有 name */}
<select>
<option value='apple'>苹果</option>
<option value='orange'>橘子</option>
<option value='banana'>香蕉</option>
</select>
<div>
<button type='submit'>注册 </button>
</div>
</form>
</div>
);
}
}
export default App;
6.16 select
import React, { PureComponent } from "react";
export class App extends PureComponent {
constructor() {
super();
this.state = {
username: "游刃有余e",
password: "",
isAgree: true,
hobbies: [
{ value: "sing", text: "唱", isChecked: false },
{ value: "dance", text: "跳", isChecked: false },
{ value: "rap", text: "rap", isChecked: false },
],
fruit: ["orange"],
};
}
handleSubmitClick(event) {
// 1. 阻止默认的行为
event.preventDefault();
// 2. 获取到所有的表单数据,对数据进行操作
console.log("获取所有的输入内容");
console.log(this.state.username, this.state.password);
console.log("获取爱好");
console.log(this.state.hobbies.filter((item) => item.isChecked).map((item) => item.value));
// 3. 以网络请求的方式,将数据传递给服务器(ajax/fetch/axios)
}
handleInputChange(event) {
this.setState({
[event.target.name]: event.target.value,
});
}
handleAgreeChange(event) {
this.setState({ isAgree: event.target.checked });
}
handleHobbiesChange(event, index) {
const hobbies = [...this.state.hobbies];
hobbies[index].isChecked = event.target.checked;
this.setState({ hobbies });
}
handleFruitChange(event) {
// this.setState({ fruit: event.target.value });
// 类数组
// console.log(event.target.selectedOptions);
const options = Array.from(event.target.selectedOptions);
const values1 = options.map((item) => item.value);
this.setState({ fruit: values1 });
// 简便写法
const values2 = Array.from(event.target.selectedOptions, (item) => item.value);
console.log(values2);
}
render() {
const { username, password, isAgree, hobbies, fruit } = this.state;
return (
<div>
<form onSubmit={(e) => this.handleSubmitClick(e)}>
<div>
{/* 1. 用户名和密码 */}
<label htmlFor='username'>
用户:
<input id='username' type='text' name='username' value={username} onChange={(e) => this.handleInputChange(e)} />
</label>
<label htmlFor='password'>
密码:
<input id='password' type='password' name='password' value={password} onChange={(e) => this.handleInputChange(e)} />
</label>
</div>
{/* 2. checkbox */}
<label htmlFor='agree'>
<input type='checkbox' id='agree' checked={isAgree} onChange={(e) => this.handleAgreeChange(e)} />
同意协议
</label>
{/* 3. checkbox 多选 */}
<div>
爱好:
{hobbies.map((item, index) => {
return (
<label htmlFor={item.value} key={item.value}>
<input type='checkbox' id={item.value} checked={item.isChecked} onChange={(e) => this.handleHobbiesChange(e, index)} />
{item.text}
</label>
);
})}
</div>
{/* 4. select 元素 */}
{/* 不是默认提交的话,可以没有 name 和 id */}
<select value={fruit} onChange={(e) => this.handleFruitChange(e)} multiple>
<option value='apple'>苹果</option>
<option value='orange'>橘子</option>
<option value='banana'>香蕉</option>
</select>
<div>
<button type='submit'>注册 </button>
</div>
</form>
</div>
);
}
}
export default App;
6.17 非受控组件
- React 推荐大多数情况下使用 受控组件 来处理表单数据:
- 一个受控组件中,表单数据是由 React 组件来管理的
- 另一种替代方案是使用非受控组件,这时表单数据将交由 DOM 节点来处理
- 如果要使用非受控组件中的数据,那么需要使用 ref 来从DOM节点中获取表单数据
- 使用 ref 来获取 input 元素
- 在非受控组件中通常使用defaultValue来设置默认值,不能通过 value 设置默认值
- 同样, 和 支持 defaultChecked, 和 支持 defaultValue
import React, { PureComponent } from "react";
import { createRef } from "react";
export class App extends PureComponent {
constructor() {
super();
this.state = {
username: "游刃有余e",
password: "",
isAgree: true,
hobbies: [
{ value: "sing", text: "唱", isChecked: false },
{ value: "dance", text: "跳", isChecked: false },
{ value: "rap", text: "rap", isChecked: false },
],
fruit: ["orange"],
info: "hhhhh",
};
this.infoRef = createRef();
}
// 在 componentDidMount 中监听
componentDidMount() {
// this.infoRef.current.addEventListener
}
handleSubmitClick(event) {
// 1. 阻止默认的行为
event.preventDefault();
// 2. 获取到所有的表单数据,对数据进行操作
console.log("获取所有的输入内容");
console.log(this.state.username, this.state.password);
console.log("获取爱好");
console.log(this.state.hobbies.filter((item) => item.isChecked).map((item) => item.value));
// 对于非受控组件,不想监听变化,直接拿到结果是比较简单的
console.log(this.infoRef.current.value);
// 3. 以网络请求的方式,将数据传递给服务器(ajax/fetch/axios)
}
handleInputChange(event) {
this.setState({
[event.target.name]: event.target.value,
});
}
handleAgreeChange(event) {
this.setState({ isAgree: event.target.checked });
}
handleHobbiesChange(event, index) {
const hobbies = [...this.state.hobbies];
hobbies[index].isChecked = event.target.checked;
this.setState({ hobbies });
}
handleFruitChange(event) {
// this.setState({ fruit: event.target.value });
// 类数组
// console.log(event.target.selectedOptions);
const options = Array.from(event.target.selectedOptions);
const values1 = options.map((item) => item.value);
this.setState({ fruit: values1 });
// 简便写法
const values2 = Array.from(event.target.selectedOptions, (item) => item.value);
console.log(values2);
}
render() {
const { username, password, isAgree, hobbies, fruit, info } = this.state;
return (
<div>
<form onSubmit={(e) => this.handleSubmitClick(e)}>
<div>
{/* 1. 用户名和密码 */}
<label htmlFor='username'>
用户:
<input id='username' type='text' name='username' value={username} onChange={(e) => this.handleInputChange(e)} />
</label>
<label htmlFor='password'>
密码:
<input id='password' type='password' name='password' value={password} onChange={(e) => this.handleInputChange(e)} />
</label>
</div>
{/* 2. checkbox */}
<label htmlFor='agree'>
<input type='checkbox' id='agree' checked={isAgree} onChange={(e) => this.handleAgreeChange(e)} />
同意协议
</label>
{/* 3. checkbox 多选 */}
<div>
爱好:
{hobbies.map((item, index) => {
return (
<label htmlFor={item.value} key={item.value}>
<input type='checkbox' id={item.value} checked={item.isChecked} onChange={(e) => this.handleHobbiesChange(e, index)} />
{item.text}
</label>
);
})}
</div>
{/* 4. select 元素 */}
{/* 不是默认提交的话,可以没有 name 和 id */}
<select value={fruit} onChange={(e) => this.handleFruitChange(e)} multiple>
<option value='apple'>苹果</option>
<option value='orange'>橘子</option>
<option value='banana'>香蕉</option>
</select>
{/* 5. 非受控组件 */}
<input type='text' defaultValue={info} ref={this.infoRef} />
<div>
<button type='submit'>注册 </button>
</div>
</form>
</div>
);
}
}
export default App;
6.18 高阶组件定义
- 高阶函数的维基百科定义:至少满足以下条件之一
- 接受一个或多个函数作为输入
- 输出一个函数
// 回顾函数
function foo() {
console.log("foo function");
}
foo();
// 高阶函数
function foo2(fn) {
console.log("foo2 function");
setTimeout(() => {
fn();
}, 2000);
}
foo2(function () {});
// [].map().filter().forEach()
// 高阶函数
function foo3() {
function bar() {}
return bar;
}
foo3();
- JavaScript 中比较常见的 filter、map、reduce 都是高阶函数。
- 高阶组件
- 高阶组件的英文是 Higher-Order Components,简称为 HOC
- 官方的定义:高阶组件是参数为组件,返回值为新组件的函数
- 首先, 高阶组件本身不是一个组件,而是一个函数
- 其次,这个函数的参数是一个组件,返回值也是一个组件
- 特点
- 接收一个组件作为它的参数
- 返回一个新的组件
- 类组件
- 函数组件
- 拦截下来,对原来的组件进行拦截
6.19 高阶组件
- 组件的名称问题:
- 在 ES6 中,类表达式中类名是可以省略的
- 组件的名称都可以通过 displayName 来修改
- 高阶组件并不是 React API 的一部分,它是基于 React 的组合特性而形成的设计模式
- 高阶组件在一些 React 第三方库中非常常见:
- 比如 redux 中的 connect
- 将 redux 中的数据,插入到 Home 中的 props里面
- 比如 react-router 中的 withRouter
- 比如 redux 中的 connect
import React, { PureComponent } from "react";
// 定义一个高阶组件
function hoc(WrapperComponent) {
// 1. 定义类组件
class NewCpn extends PureComponent {
render() {
// 对组件做了一层拦截
return <WrapperComponent name='li'></WrapperComponent>;
}
}
return NewCpn;
// 2. 定义函数组件
// function NewCpn2(props) {}
// return NewCpn2;
}
class HelloWorld extends PureComponent {
render() {
return <h1>hello world</h1>;
}
}
const HelloWorldHOC = hoc(HelloWorld);
export class App extends PureComponent {
render() {
return (
<div>
{/* <HelloWorld></HelloWorld> */}
<HelloWorldHOC></HelloWorldHOC>
</div>
);
}
}
export default App;
6.20 使用高阶组件的场景
-
目的
- 在组件真正渲染之前进行拦截操作
- 增强
- 判断的逻辑
- 在组件真正渲染之前进行拦截操作
-
props 的增强<一>
- hoc => enhanced_props.js
- pages
import React, { PureComponent } from "react";
// 将数据注入到组件里面
// 定义高阶组件:给一些需要特殊数据的组件,注入 props
function enhancedUserInfo(OriginComponent) {
class NewComponent extends PureComponent {
constructor() {
super();
this.state = {
userInfo: {
name: "lili",
level: 99,
},
};
}
render() {
return <OriginComponent {...this.props} {...this.state.userInfo} />;
}
}
return NewComponent;
}
export default enhancedUserInfo;
import React, { PureComponent } from 'react'
import enhancedUserInfo from '../hoc/enhanced_props'
export class About extends PureComponent {
render() {
return (
<div>About</div>
)
}
}
export default enhancedUserInfo( About)
import React, { PureComponent } from "react";
import enhancedUserInfo from "./hoc/enhanced_props";
import About from "./pages/About";
const Home = enhancedUserInfo(function (props) {
return (
<h1>
Home:{props.name}-{props.level}-{props.banners}
</h1>
);
});
const Profile = enhancedUserInfo(function (props) {
return (
<h1>
Profile:{props.name}-{props.level}
</h1>
);
});
const HelloFriend = enhancedUserInfo(function (props) {
return (
<h1>
HelloFriend:{props.name}-{props.level}
</h1>
);
});
export class App extends PureComponent {
render() {
return (
<div>
<Home banners={["hah", "lal", "lil"]} />
<Profile />
<HelloFriend />
<About />
</div>
);
}
}
export default App;
context
- Context的共享<二>
- context->theme_context
- 将对应的 context 通过函数增强将东西放在原始组件里面
import { createContext } from "react";
const themeContext = createContext()
export default themeContext
import ThemeContext from "../context/theme_context";
function withTheme(OriginComponent) {
return (props) => {
return (
<ThemeContext.Consumer>
{(value) => {
return <OriginComponent {...value} {...props}></OriginComponent>;
}}
</ThemeContext.Consumer>
);
};
}
export default withTheme;
import React, { PureComponent } from "react";
import withTheme from "../hoc/with_theme";
export class Product extends PureComponent {
render() {
const { color, size } = this.props;
return (
<div>
Product:{color}-{size}
</div>
);
}
}
export default withTheme(Product);
- 渲染判断鉴权<三>
- 某些页面是必须用户登录成功才能进行进入
- 如果用户没有登录成功,那么直接跳转到登录页面
function loginAuth(OriginComponent) {
// 如果有状态的话就使用类组件
// 没有自己的状态的话就使用函数组件
return (props) => {
// 从 localStorage 中获取token
const token = localStorage.getItem("token");
if (token) {
return <OriginComponent {...props} />;
}
return <h2>请先登录再跳转到对应的页面中</h2>;
};
}
export default loginAuth;
import React, { PureComponent } from 'react'
import loginAuth from '../hoc/login_auth'
class Cart extends PureComponent {
render() {
return (
<div>
<h2>Cart</h2>
</div>
)
}
}
export default loginAuth(Cart)
import React, { PureComponent } from "react";
import Cart from "./pages/Cart";
export class App extends PureComponent {
constructor() {
super();
this.state = {
isLogin: false,
};
}
loginClick() {
localStorage.setItem("token", "li");
this.setState({ isLogin: true });
//不改变 state 强制重新刷新
// this.forceUpdate();
}
render() {
const { isLogin } = this.state;
return (
<div>
<button onClick={(e) => this.loginClick()}>登录</button>
<Cart />
</div>
);
}
}
export default App;
- 生命周期劫持<四>
- 快速语法:
ul>li{数据列表$}*10
- 快速语法:
import { PureComponent } from "react";
function logRenderTime(OriginComponent) {
// 类名可以省略:可以理解为匿名类
// return class NewComponent extends PureComponent{
return class extends PureComponent {
// 不建议使用:
// componentWillMount() {}
// 暂时用一下,想知道花费的时间
UNSAFE_componentWillMount() {
this.beginTime = new Date().getTime();
}
componentDidMount() {
this.endTime = new Date().getTime();
const interval = this.endTime - this.beginTime;
console.log(`当前${OriginComponent.name}页面花费${interval}ms渲染完成`);
}
render() {
return <OriginComponent {...origin}></OriginComponent>;
}
};
}
export default logRenderTime;
import React, { PureComponent } from "react";
import logRenderTime from "../hoc/log_render_time";
export class Detail extends PureComponent {
// // 不建议使用:
// // componentWillMount() {}
// // 暂时用一下,想知道花费的时间
// UNSAFE_componentWillMount() {
// this.beginTime = new Date().getTime();
// }
// componentDidMount() {
// this.endTime = new Date().getTime();
// const interval = this.endTime - this.beginTime;
// console.log(interval);
// }
render() {
return (
<div>
<h1>Detail</h1>
<ul>
<li>数据列表1</li>
<li>数据列表2</li>
<li>数据列表3</li>
<li>数据列表4</li>
<li>数据列表5</li>
<li>数据列表6</li>
<li>数据列表7</li>
<li>数据列表8</li>
<li>数据列表9</li>
<li>数据列表10</li>
</ul>
</div>
);
}
}
export default logRenderTime(Detail);
import React, { PureComponent } from "react";
import Cart from "./pages/Cart";
import Detail from "./pages/Detail";
export class App extends PureComponent {
render() {
return (
<div>
<Detail></Detail>
</div>
);
}
}
export default App;
6.21 高阶函数的意义
- 利用高阶组件可以针对某些 React 代码进行更加优雅的处理
- 其实早期的 React 有提供组件之间的一种复用方式是 mixin ,目前已经不再建议使用:
- Mixin 可能会相互依赖,相互耦合,不利于代码维护
- 不同的 Mixin 中的方法可能会相互冲突
- Mixin非常多时,组件处理起来会比较麻烦,甚至还要为其做相关处理,这样会给代码造成滚雪球式的复杂性
- 当然,HOC 也有自己的一些缺陷
- HOC 需要在原组件上进行包裹或者嵌套,如果大量使用 HOC,将会产生非常多的嵌套,这让调试变得非常困难
- HOC 可以劫持 props ,在不遵守约定的情况下也可能造成冲突
- Hooks 的出现,是开创性的,它解决了很多 React 之前的存在的问题
- 比如 this 指向问题、比如 hoc 的嵌套复杂度问题等等
6.22 ref 的转发
-
memo 是一个高阶组件,相当于 PureComponent
-
forwardRef 也是一个高阶组件,返回一个新函数组件
-
ref 不能应用于函数式组件:
- 因为函数式组件没有实例,所以不能获取到对应的组件对象
-
但是,在开发中可能想要获取函数式组件中某个元素的 DOM,这个时候如何操作呢
-
方式一:直接传入 ref 属性(错误的做法)
-
方式二:通过 forwardRef 高阶函数
-
6.23 Portals 的使用
- 某些情况下,希望渲染的内容独立于父组件,甚至是独立于当前挂载到的DOM 元素中(默认都是挂载到 id 为 root 的 DOM元素上的
- Portal 提供了一种将子节点渲染到存在于父组件以外的 DOM 节点的优秀的方案:
- 第一个参数(child)是任何可渲染的 React 子元素,例如一个元素,字符串或 fragment
- 第二个参数(container)是一个 DOM 元素
- 通常来讲,当从组件的 render 方法返回一个元素时,该元素将被挂载到 DOM 节点中离其最近的父节点
- 然而,有时候将子元素插入到 DOM 节点中的不同位置也是有好处的
<div id="root"></div>
<div id="lili"></div>
<div id="modal"></div>
<style>
#modal {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
</style>
import React, { PureComponent } from "react";
import { createPortal } from "react-dom";
import Modal from "./Modal";
export class App extends PureComponent {
render() {
return (
<div className='app'>
{createPortal(<h2>App h2</h2>, document.querySelector("#lili"))}
{/* Modal 组件 */}
<Modal>
<h2>我是标题</h2>
<h1>yyy</h1>
<h2>eee</h2>
<h3>4444</h3>
</Modal>
</div>
);
}
}
export default App;
import React, { PureComponent } from "react";
import { createPortal } from "react-dom";
export class Modal extends PureComponent {
render() {
return createPortal(this.props.children, document.querySelector("#modal"));
}
}
export default Modal;
6.24 fragment
- 在之前的开发中,总是在一个组件中返回内容时包裹一个 div 元素
- 又希望可以不渲染这样一个 div 应该如何操作呢?
- 使用 Fragment
- Fragment 允许将子列表分组,而无需向 DOM 添加额外节点
- vue 的 template 也是使用这种方式
- React 还提供了 Fragment 的短语法:
- 它看起来像空标签 <> </>
- 但是,如果需要在 Fragment 中添加 key ,那么就不能使用短语法
import React, { PureComponent, Fragment } from "react";
export class App extends PureComponent {
render() {
return (
<Fragment>
<h1>我是标题</h1>
<h2>我是content</h2>
</Fragment>
);
}
}
export default App;
import React, { PureComponent, Fragment } from "react";
export class App extends PureComponent {
constructor() {
super();
this.state = {
sections: [
{ title: "hahhh", content: "我是hahhh" },
{ title: "hahhh", content: "我是hahhh" },
{ title: "hahhh", content: "我是hahhh" },
{ title: "hahhh", content: "我是hahhh" },
{ title: "hahhh", content: "我是hahhh" },
{ title: "hahhh", content: "我是hahhh" },
],
};
}
render() {
const { sections } = this.state;
return (
<>
<h1>我是标题</h1>
<h2>我是content</h2>
<hr />
{sections.map((item) => {
return (
<Fragment key={item.title}>
<h1>{item.title}</h1>
<h2>{item.content}</h2>
<hr />
</Fragment>
);
})}
</>
);
}
}
export default App;
6.25 StrictMode
- StrictMode 是一个用来突出显示应用程序中潜在问题的工具:
- 与 Fragment 一样,StrictMode 不会渲染任何可见的 UI
- 它为其后代元素触发额外的检查和警告
- 严格模式检查仅在开发模式下运行;它们不会影响生产构建
- 可以为应用程序的任何部分启用严格模式:
- 不会对 Header 和 Footer 组件运行严格模式检查
- 但是,ComponentOne 和 ComponentTwo 以及它们的所有后代元素都将进行检查
- 使用
StrictMode
进行包裹
6.26 严格模式检查什么
- 识别不安全的生命周期
- 使用过时的 ref API
- 检查意外的副作用
- 这个组件的 constructor 会被调用两次
- 这是严格模式下故意进行的操作,让你来查看在这里写的一些逻辑代码被调用多次时,是否会产生一些副作用
- 在生产环境中,是不会被调用两次的
- react 18 之后会显示灰色
- 使用废弃的 findDOMNode方法
- 在之前的 React API 中,可以通过 findDOMNode 来获取 DOM,不过已经不推荐使用了
- 传入组件返回根元素
- 建议使用 ref 进行绑定
- 在之前的 React API 中,可以通过 findDOMNode 来获取 DOM,不过已经不推荐使用了
- 检测过时的 context API
- 早期的Context是通过static属性声明Context对象属性,通过getChildContext 返回 Context 对象等方式来使用 Context 的