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

React 进阶提高 - 技巧篇 - 第 2 季 #1 React 16.7.0 新特性 State Hook - 有讲到如何升级到新版本

海外散仙厉飞雨 · 真仙发布于
2

https://reactjs.org/docs/hooks-intro.html

https://www.npmjs.com/package/react

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Array_destructuring

https://github.com/rehooks/awesome-react-hooks

https://github.com/streamich/react-use

改写前

src/App.js

import React, { Component } from 'react';

class App extends React.Component {
  state = {
    count: 0
  }

  componentDidMount() {
    document.title = `You clicked ${this.state.count} times`;
  }

  componentDidUpdate() {
    document.title = `You clicked ${this.state.count} times`;
  }

  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Click me
        </button>
      </div>
    );
  }
}

export default App;

改写后

src/App.js

import React, { useState } from 'react';

const App = (props) => {
  const [count, setCount] = useState(0)

  // componentDidMount() {
  //   document.title = `You clicked ${this.state.count} times`;
  // }
  //
  // componentDidUpdate() {
  //   document.title = `You clicked ${this.state.count} times`;
  // }

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

export default App;
6 条回复
课程目录

FreeReact 进阶提高 - 技巧篇 - 第 2 季 #1 React 16.7.0 新特性 State Hook - 有讲到如何升级到新版本

2FreeReact 进阶提高 - 技巧篇 - 第 2 季 #2 React 16.7.0 新特性 Effect Hook

3FreeReact 进阶提高 - 技巧篇 - 第 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(完结)- 下套第三季

学员
ttswh2009 · 太乙巅峰徐潇宇 · 金仙后期iosLongFeng · 太乙巅峰心之所向,无力阻挡 · 太乙玉仙KumoIs · 金仙后期729902288 · 大罗奋斗的蜗牛 · 真仙Super-Ps · 金仙后期bafvhxk03 · 大罗itlaowang520 · 太乙巅峰zhangtao · 金仙后期qianduan · 真仙薄情人 · 道祖xuezh · 太乙巅峰underlineMY · 真仙Messi-Q · 真仙charies · 真仙azqazq1234 · 太乙巅峰jianglinhub · 金仙后期13198178383 · 金仙巅峰chrisliume · 大罗wangzhe123 · 太乙巅峰
最新动态
ttswh2009 · 太乙巅峰学习到了12:23
徐潇宇 · 金仙后期学习到了12:28
iosLongFeng · 太乙巅峰学习到了11:59
心之所向,无力阻挡 · 太乙玉仙学习到了0:00
KumoIs · 金仙后期学习到了12:00

© 汕尾市求知科技有限公司 | 粤ICP备19038915号 | 在线学员:30

Top