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

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

下载hfpp2012发布于React12562 次点击播放时长:12:00
1

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;
4 条回复
播放列表目录

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

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

3ProReact 进阶提高 - 技巧篇 - 第 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

支付宝付款
订阅或购买扫码加我微信

加我微信:15014006126

加 QQ 群:697272886(1 群)

加 QQ 群:856141852(2 群)

© Rails365 | 隐私条款 | 服务条款 | 友情链接:轻课堂 | 粤ICP备15004902号 | 在线学员:8

Top