剧场模式
首页前端React 进阶提高 - 技巧篇 - 第 2 季

React 进阶提高 - 技巧篇 - 第 2 季 #3 React 16.7.0 新特性 - 两个实例应用来实践 State Hook 和 Effect Hook

下载hfpp2012发布于React13471 次点击播放时长:10:43
2

改造前

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;
0 条回复
暂无回复~~
播放列表目录

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(完结)- 下套第三季

支付宝付款
buy me a coffee
微信二维码
友情提示
   官方 QQ 1 群 697272886(500/2000)
   官方 QQ 2 群 856141852

© Rails365 | 隐私条款 | 服务条款 | 粤ICP备15004902号 | 在线学员:20

Top