此文项目代码：https://github.com/bei-yang/I-want-to-be-an-architect
码字不易，辛苦点个star，感谢！
引言
此篇文章主要涉及以下内容：
- 函数化组件
Hook - 上下文的使用
- 设计并实现一个表单组件
学习资源
- Hook
- Context
Hook
Hook是React 16.8一个新增项，它可以让你在不编写class的情况下使用state以及其他的React特性。
Hook的特点：
- 使你在无需修改组件结构的情况下复用状态逻辑
- 可将组件中相互关联的部分拆分成更小的函数，复杂组件将变得更容易理解
- 更简洁、更易理解的代码
准备工作
- 升级
react、react-dom
npm i react react-dom -S
状态钩子-State Hook
- 创建HookTest.js
import React, { useState } from 'react'
export default function HooksTest() {
// useState(initialState),接收初始状态，返回一个状态变量和其更新函数
const [count, setCount] = useState(0)
// 多个状态
const age = useAge();
const [fruit, setFruit] = useState("banana");
const [input, setInput] = useState("");
const [fruits, setFruits] = useState(["apple", "banana"]);
return (
点击了{count}次
年龄：{age ? age : 'loading...'}
选择的水果：{fruit}
setInput(e.target.value)}
/>
{fruits.map(f => (
- setFruit(f)}>
{f}
))}
)
}
副作用钩子-Effect Hook
userEffect就是一个Effect Hook，给函数组件增加了操作副作用的能力。它跟class组件中的componentDidMount、componentDidUpdate和componentWillUnmount具有相同的用途，只不过被合并成了一个api。
- 更新HooksTest.js
import React, { useState, useEffect } from 'react'
// 副作用钩子会在每次渲染时都执行
// 如果仅打算执行一次，传递第二个参数为[]
// componentDidMount
useEffect(() => {
// api调用
console.log("api调用");
}, []);
useEffect(() => {
// Update the documnet title using the browser api
document.title = `点击了${count}次`
})
自定义钩子-Custom Hook
自定义Hook是一个函数，其名称以use开头，函数内部可以调用其他的Hook。
function useAge() {
const [age, setAge] = useState(0)
useEffect(() => {
setTimeout(() => {
setAge(20)
}, 2000)
})
return age
}
// 使用
const age = useAge()
年龄{age ? age : 'loading...'}
其他Hook
useContext，useReducer，useCallback，useMemo
组件跨层级通信-Context
上下文提供一种不需要每层设置props就能跨多级组件传递数据的方式
Context相关API
- React.createContext
- Context.Provider
- Class.contextType
- Context.Consumer
基本用法
创建文件contextText.js
- 创建上下文
const MyContext = React.createContext();
- 提供上下文
const { Provider } = MyContext
export default function App() {
return (
)
}
- 消费上下文
function Child3(props) {
return {props.foo}
}
export default function App() {
return (
{value =>
)
}
组件设计与实现
表单组件实现
import React from 'react'
import { Input, Button } from 'antd'
import { log } from 'util'
/*
创建一个高阶组件：
1、扩展现有表单
2、事件处理
3、数据收集
4、校验1
*/
function kFromCreate(Comp) {
return class extends React.Component {
constructor(props) {
super(props)
this.options = {}
this.state = {}
}
handleChange = e => {
const { name, value } = e.target
console.log(name, value)
this.setState({ [name]: value }, () => {
// 确保值发生变化再校验
this.validateField(name)
})
}
validateField = field => {
// 1.获取校验规则
const rules = this.options[field].rules
// 任意一项失败则返回false
const ret = !rules.some(rule => {
if (rule.required) {
if (!this.state[field]) {
// 校验失败
this.setState({
[field + 'Message']: rule.message
})
return true
}
}
})
if (ret) {
this.setState({
[field + 'Message']: ''
})
}
return ret
}
// 校验所有字段
validate = cb => {
const rets = Object.keys(this.options).map(field =>
this.validateField(field)
)
const ret = rets.every(v => v === true)
cb(ret, this.state)
}
// 创建input包装器
getFieldDec = (field, option) => {
// 保存当前输入项配置
this.options[field] = option
return InputComp => (
{React.cloneElement(InputComp, {
name: field,
value: this.state[field] || '',
onChange: this.handleChange
})}
{/* 校验错误信息 */}
{this.state[field + 'Message'] && (
{this.state[field + 'Message']}
)}
)
}
render() {
return (
你的赞是我前进的动力
求赞，求评论，求分享...