xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!

React 16.x & Hooks

Hooks

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

React 16.x

https://reactjs.org/blog/2018/11/27/react-16-roadmap.html

https://discuss.reactjs.org/
https://dev.to/t/react
https://reactjs.org/docs/hooks-intro.html
https://reactjs.org/community/support.html

React Hook 解决了什么问题

Hooks are a new addition in React 16.8

They let you use state and other React features without writing a class.

we’ll continue by explaining why we’re adding Hooks to React and how they can help you write great applications

React 16.8.0 is the first release to support Hooks.

React Native supports Hooks since the 0.59 release of React Native.

90% Cleaner React With Hooks

Hooks provide a more direct API to the React concepts you already know: props, state, context, refs, and lifecycle.

问题

钩子解决了React在过去五年来编写和维护的成千上万个组件中遇到的各种看似无关的问题

Q:1 It’s hard to reuse stateful logic between components

wrapper hell, providers, consumers, higher-order components, render props

https://reactjs.org/docs/higher-order-components.html

https://reactjs.org/docs/render-props.html

A:1 Hooks allow you to reuse stateful logic without changing your component hierarchy

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

Q:2 Complex components become hard to understand

the same componentDidMount method might also contain some unrelated logic that sets up event listeners, with cleanup performed in componentWillUnmount

Mutually related code that changes together gets split apart, but completely unrelated code ends up combined in a single method.

A: 2 Hooks let you split one component into smaller functions based on what pieces are related (such as setting up a subscription or fetching data)

https://reactjs.org/docs/hooks-effect.html#tip-use-multiple-effects-to-separate-concerns

Q:3 Classes confuse both people and machines

this, You have to remember to bind the event handlers.

https://babeljs.io/docs/en/babel-plugin-transform-class-properties/

For example, classes don’t minify very well, and they make hot reloading flaky and unreliable.

A:3 Hooks let you use more of React’s features without classes

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

复盘React Hook的创造过程

react hooks 实现过程分析

https://github.com/shanggqm/blog/issues/4

React Hooks 调用顺序

https://overreacted.io/zh-hans/why-do-hooks-rely-on-call-order/

性能优化

---

React Component Lifecycle

https://reactjs.org/docs/react-component.html

https://reactjs.org/docs/state-and-lifecycle.html

react-lifecycle-methods-diagram

http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

16.3

16.4

---