ant design pro v5 获取动态菜单与基于角色权限管理视频教程 准备更新中
世界上最伟大的投资就是投资自己的教育
改造前
src/EmojiGenerator.js
import React, { Component } from 'react';
const emojiSet = ['🎃', '👻', '🧟', '😱', '👽', '💀'];
class EmojiGenerator extends Component {
state = {
emoji: emojiSet[0]
}
generateEmoji = () => {
let randomIndex = Math.floor(Math.random() * emojiSet.length);
let randomEmoji = emojiSet[randomIndex];
this.setState({
emoji: randomEmoji
})
}
render() {
return (
<div>
<span className="emoji" role="img" aria-label="emoji">
{ this.state.emoji }
</span>
<button className="medium-btn" onClick={ this.generateEmoji }>
Generate
</button>
</div>
)
}
}
class App extends Component {
render() {
return (
<div>
<EmojiGenerator />
</div>
);
}
}
export default App;
src/TokenApp.js
import React, { Component } from 'react';
class TokenForm extends Component {
handleSubmit = event => {
event.preventDefault();
const { setToken } = this.props;
const token = this.tokenInput.value;
if (token) {
setToken(token);
}
}
render() {
return (
<form onSubmit={ this.handleSubmit }>
<input
type="text"
name="token"
placeholder="Enter your Github token"
ref={input => {
this.tokenInput = input;
}}
/>
</form>
)
}
}
export default class TokenApp extends Component {
state = {
token: null
}
componentDidMount() {
this.setState({ token: sessionStorage.getItem("token") });
}
setToken = token => {
sessionStorage.setItem("token", token);
this.setState({ token });
}
render() {
const { token } = this.state;
return (
<div>
<h1>Hello</h1>
{ token ? token : <TokenForm setToken={ this.setToken } /> }
</div>
)
}
}
改造后
src/EmojiGenerator.js
import React, { useState } from 'react';
const emojiSet = ['🎃', '👻', '🧟', '😱', '👽', '💀'];
const EmojiGenerator = () => {
const [emoji, setEmoji] = useState(emojiSet[0])
const generateEmoji = () => {
let randomIndex = Math.floor(Math.random() * emojiSet.length);
let randomEmoji = emojiSet[randomIndex];
setEmoji(randomEmoji);
}
return (
<div>
<span className="emoji" role="img" aria-label="emoji">
{ emoji }
</span>
<button className="medium-btn" onClick={ generateEmoji }>
Generate
</button>
</div>
)
}
const App = () => {
return (
<div>
<EmojiGenerator />
</div>
);
}
export default App;
src/TokenApp.js
import React, { Component, useState, useEffect } from 'react';
class TokenForm extends Component {
handleSubmit = event => {
event.preventDefault();
const { setToken } = this.props;
const token = this.tokenInput.value;
if (token) {
setToken(token);
}
}
render() {
return (
<form onSubmit={ this.handleSubmit }>
<input
type="text"
name="token"
placeholder="Enter your Github token"
ref={input => {
this.tokenInput = input;
}}
/>
</form>
)
}
}
const TokenApp = () => {
const [token, setToken] = useState(sessionStorage.getItem("token"))
useEffect(() => {
sessionStorage.setItem("token", token);
})
return (
<div>
<h1>Hello</h1>
{ token ? token : <TokenForm setToken={ setToken } /> }
</div>
)
}
export default TokenApp;
1FreeReact 进阶提高 - 技巧篇 - 第 2 季 #1 React 16.7.0 新特性 State Hook - 有讲到如何升级到新版本
2FreeReact 进阶提高 - 技巧篇 - 第 2 季 #2 React 16.7.0 新特性 Effect Hook
FreeReact 进阶提高 - 技巧篇 - 第 2 季 #3 React 16.7.0 新特性 - 两个实例应用来实践 State Hook 和 Effect Hook
4ProReact 进阶提高 - 技巧篇 - 第 2 季 #4 使用 React Hook 来实现 TodoList - 写自定义的 Hook
5ProReact 进阶提高 - 技巧篇 - 第 2 季 #5 使用 React Hook 来实现 TodoList (complete)
6ProReact 进阶提高 - 技巧篇 - 第 2 季 #6 通过跳过 React Hook Effect 来优化性能
7ProReact 进阶提高 - 技巧篇 - 第 2 季 #7 使用 React Hooks useEffect 发送 ajax 请求获取数据全攻略
8ProReact 进阶提高 - 技巧篇 - 第 2 季 #8 使用 React Hooks useEffect 改造代码- 实践篇
9ProReact 进阶提高 - 技巧篇 - 第 2 季 #9 React Hook 的规则 - 实例演练
10ProReact 进阶提高 - 技巧篇 - 第 2 季 #10 React Hooks useEffect 中的 componentWillUnmount - 实例演练
11ProReact 进阶提高 - 技巧篇 - 第 2 季 #11 什么是 React.memo
12ProReact 进阶提高 - 技巧篇 - 第 2 季 #12 性能提升之 React.memo、useCallback、useReducer part 1
13ProReact 进阶提高 - 技巧篇 - 第 2 季 #13 性能提升之 React.memo、useCallback、useReducer part 2
14ProReact 进阶提高 - 技巧篇 - 第 2 季 #14 性能提升之 React.memo、useCallback、useReducer part 3
15ProReact 进阶提高 - 技巧篇 - 第 2 季 #15 使用 immer 和 Reducer 结合 React Hook - Redux 不结合使用 immer 会后悔
16ProReact 进阶提高 - 技巧篇 - 第 2 季 #16 React Hooks useContext
17ProReact 进阶提高 - 技巧篇 - 第 2 季 #17 setState 深度解析
18ProReact 进阶提高 - 技巧篇 - 第 2 季 #18 React v16.6.0 新特性 static contextType(完结)- 下套第三季
© 汕尾市求知科技有限公司 | 关注我们 | 在线学员:1118
粤公网安备 44152102000088号 | 粤ICP备19038915号
讲解很便于理解~