代码拉取完成,页面将自动刷新
typeScript+react+antd 后台管理
本项目中的webpack文件被脚手架隐藏了,封装到了react-script包中
开发依赖 babel-plugin-import 实现antd的按需加载 http-server/http-proxy-middleware协助搭建mock
config-overrides.js 为实现antd按需加载
React.FC 在函数的参数中隐含声明了children属性 定义静态属性会有提示
函数组件
类组件
高阶组件
不能接受组件默认的参数 已知存在的问题,做限制是变成可选的
Hooks 代替类组件、多个hooks互不影响避免嵌套地狱,开发效率高
Hook 是一些可以让你在函数组件里“钩入” React state 及生命周期等特性的函数。Hook 不能在 class 组件中使用 —— 这使得你不使用 class 也能使用 React。
React 16.8.0 是第一个支持 Hook 的版本。升级时,请注意更新所有的 package,包括 React DOM。 React Native 从 0.59 版本开始支持 Hook。
hook的本质是javaScript函数
useState类似于类组件中的this.setState
import React, { useState } from 'react';
function Example() {
// 声明一个叫 “count” 的 state 变量。
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
声明多个state变量
function ExampleWithManyStates() {
// 声明多个 state 变量!
const [age, setAge] = useState(42);
const [fruit, setFruit] = useState('banana');
const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]);
}
useEffect 就是一个 Effect Hook,给函数组件增加了操作副作用(数据获取、订阅或者手动修改过 DOM)的能力
它类似于class组件中componentDidMount、componentDidUpdate、componentWillUnmount具有相同的用途,只不过合并成了一个API
import React, { useState, useEffect } from 'react';
function Example() {
const [count, setCount] = useState(0);
// 相当于 componentDidMount 和 componentDidUpdate:
useEffect(() => {
// 使用浏览器的 API 更新页面标题
document.title = `You clicked ${count} times`;
});
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
hook本质是JavaScript函数,有两个规则:
(1) 只能在函数最外层调用Hook。不要在循环、条件判断或子函数中调用
(2) 只能在React的函数组件中调用Hook。不要在其他JavaScript函数中调用
--- 未完待续 ---
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。