react
2023-07-20 21:32:47 0 举报AI智能生成
react学习
作者其他创作
大纲/内容
项目工程化
git
eslint
禁用 console.log
transform-remove-console
.eslintignore
prettier
styleLint
vscode 保存格式化代码
husky
commitLint
scripts/preinstall.js
路由
react-router-dom@5
语法
lazyLoad
<BrowserRouter>与<HashRouter>
<Link>与<NavLink>
<Switch>与<Route>
<Redirect>
this
路由表(自己封装)
获取路由参数
this.props.params
this.props.search
this.props.location
编程式导航
this.props.history
withRouter
其它
...
react-router-dom@6
语法
lazyLoad
<BrowserRouter>与<HashRouter>
<Link>与<NavLink>
<Routes>与<Route>
<Navigate>
Hooks
路由表
useRoutes
<Outlet>
获取路由参数
useParams
useSearchParams
useLocation
useMatch
编程式导航
uesNavigate
其它
useInRouterContext
useNavigationType
useOutlet
useResolvedPath
数据集中式管理
react-redux 整合
redux 更新、发布、订阅
store
reducers
preState=initState, { type, payload }
actions
{ type, payload }
fn
中件间
redux-thunk 请求
redux-saga 请求
reudx-persist 持久化
reudx-toolkit 语法糖
axios
拦截器
api封装
洗数据(傻B后端)
拓展
Fragment
<Fragment key={ 1 }>
<></>
错误边界
各种不常用API ...
上线
Linux
nginx
组件
组件本质 jsx
组件分类
声明
class 组件
func 组件
控制
非受控组件
受控组件
路由
路由组件
非路由组件
react-reudx
容器组件
UI组件
关系
父子组件
兄弟组件
祖孙组件
组件通信(重点)
props
传非函数
传方法
this.props.children
this.props.render({ ...this.state })
this.props.render({ ...this.state })
context
const MyContext = React.createContext()
const { Provider, Consumer } = MyContext
const { Provider, Consumer } = MyContext
数据集中式管理
redux
dva
等等...
消息订阅-发布
pubs-sub
event
等等...
类组件rcc
组件三大核心属性
state
可传两个参数
props
refs与事件处理
string
回调函数
React.createRef()
组件生命周期(旧、新)
ReactDOM.render( ... )
挂载
componentDidMount
更新
componentDidUpdate
卸载
componentWillUnmount
报错
getDerivedStateFromError(error)
componentDidCatch(error, info)
componentDidCatch(error, info)
this理解(难点)
函数组件rfc
组件三大核心属性
state Hooks
const [xxx, setXxx] = React.useState(0)
正常接参数
props
refs Hooks
const refIpt = React.useRef()
组件生命周期
ReactDOM.render( ... )
React.useEffect( fn, [arr] )
Hooks
各种钩子瞬间
组件生命周期
路由url监听
数据钩子
render
redux发布订阅
DOM钩子
setState第二个回调函数
事件
TypeScript
进阶
SSR
性能优化
PureComponent
源码
Virtual Dom
jsx
babel
Diffing
setState
0 条评论
下一页
