By Dan Abramov

Translator: UC International research and development Jothy

Welcome to the “UC International Technology” public account, we will provide you with the client, server, algorithm, testing, data, front-end and other related high-quality technical articles, not limited to original and translation.

React Hooks release Stable version with React 16.8.


What is the Hooks?

Hooks allow you to use state and other React features without writing a class. You can also build your own Hooks that share reusable stateful logic across components.

If you’ve never heard of Hooks before, you might find these resources interesting:

  • The introduction explains why we added Hooks to React.
  • The Hooks Overview is a quick overview of built-in Hooks.
  • Building your own Hooks demonstrates how to reuse code using custom Hooks.
  • Understand React Hooks explore new possibilities unlocked by Hooks.
  • UseHooks.com features Hooks and demos maintained by the community.

Hooks no major changes, we have no plans to remove them from React. The Class. Hooks FAQ describes the strategy we adopted step by step.


No major rewrite

We do not recommend that you rewrite an existing application in order to apply Hooks immediately. Instead, we suggest you try using Hooks in some new components and let us know what you think. Code using Hooks will work in parallel with existing code using class.


Can I use Hooks now?

Can!!!! As of version 16.8.0, React includes a stable Implementation of React Hooks that can be used to:

  • React DOM
  • React DOM Server (Server)
  • React Test Renderer
  • React Shallow Renderer

Note that to enable Hooks, all React packages must be upgraded to version 16.8.0 or higher. Hooks will not run if you forget to update packages such as the React DOM.

React Native will support Hooks in version 0.59.



Tool support

React DevTools now supports React Hooks, as do the latest Flow and TypeScript definitions of React. We strongly recommend that you enable a new Lint rule called eslint-plugin-react-hooks to enforce hooks best practices. The Create React App will include it soon.


planning

We outlined our plans for the coming months in the recently released React Roadmap.

Note that React Hooks don’t cover all class use cases yet, but they are close enough. Currently, only the getSnapshotBeforeUpdate() and componentDidCatch() methods do not have the equivalent Hooks API, and these lifecyths are relatively uncommon. If you want to use Hooks, you can use them in most of the new code you are writing.

Even though it is still alpha, the React community uses Hooks to create many interesting examples and usages for animations, forms, subscriptions, integration with other libraries, etc. We’re excited about Hooks because they make code more reusable, help you write components in a simpler way, and create a great user experience. We can’t wait to see what you create next!


Test the Hooks

In this release we added a new API called reacttestutils.act (). It ensures that the behavior of the test more closely matches the behavior in the browser. We recommend wrapping all code rendering and component update triggers into act() calls. Test libraries can also use it to encapsulate apis (for example, the Render and fireEvent tools of the React-testing-Library do this).


For example, the counter example on this page could be tested like this:




Calls to act() also refresh their internal effects.

If you need to test custom hooks, you can create the component at test time and use its hooks. Then you can test your component.

To reduce duplicate templates, we recommend using the react-testing-library, which encourages programmers to write tests that simulate the behavior of users using components.


Thank you

We want to thank everyone who shared feedback on Hooks RFC. We’ve read all of your comments and made some changes to the final API based on them.


The installation

React {#react}

React 16.8.0 has been released to the NPM registry.


To install React 16 using Yarn, run:

​



Install React 16 using NPM:





We also provide a UMD build of React via CDN:

​

For details, visit installation Details.


ESLint plugin for React Hooks

Pay attention to

To sum up, we strongly recommend that you use it
eslint-plugin-react-hooksLint rules.

If you are using the Create React App instead of manually configuring ESLint, you can wait for the next version
react-scripts, this rule will then be included.


Assuming you have ESLint installed, run:





Then add the following ESLint configuration:

​


Update log

React {#react-1}

  • Added Hooks — a way to use state and other React features without writing a class. (@acdLite et al. #13968)
  • To improve theuseReducerHook delay initialization API. (@acdlitePut forward to# 14723)


React DOM {#react-dom}

  • Avoid touseState 和 useReducerHooks render when the same value is passed in. (@acdlitePut forward to# 14569)
  • No comparison is passed touseEffect/useMemo/useCallbackFirst argument to Hooks. (@gaearonPut forward to# 14654)
  • useObject.isAlgorithm to compareuseState 和 useReducerThe value of the. (@JessidhiaPut forward to# 14752)
  • Support passing toReact.lazy()Synchronization thenable. (@gaearonPut forward to# 14626)
  • Render the component twice using Hooks in strict mode (DEV only) to match the class behavior. (posted by @gaearon on #14654)
  • Warning when Hook order does not match in development mode. (proposed by @threepointone on #14585 and @acdLite on #14591)
  • The Effect cleanup function must returnundefinedOr function. Not allowed to includenullAll other values within. (@acdlitePut forward to# 14119)


React tests the renderer

  • Support for Hooks in shallow renderers. (proposed by @trueadm in #14567)
  • Exists in shallow renderersgetDerivedStateFromPropsIn case of repairshouldComponentUpdateError status in. (@chenesanPut forward to# 14613)
  • addReactTestRenderer.act() 和 ReactTestUtils.act()To do batch updates so that the tests are closer to the real behavior. (@threepointonePut forward to# 14744)


{#eslint-plugin-react-hooks}

  • This issue is the first official release. (@calebmer was posted at #13968)
  • Fix report after loop. (Posted by @Calebmer and @Yurickh on #14661)
  • Don’t treat an incorrect throw as a rule violation. (@SophieBits was created in #14040)


{# resting-changelog-since -alpha-versions}

The above change log contains all significant changes since the last stable release (16.7.0). As with all of our minor releases, these changes do not break backward compatibility.

If you are using Hooks from the React Alpha release, please note that this release does contain some small significant changes to Hooks. We do not recommend relying on alpha in production code. We release them to make changes based on community feedback before the API stabilizes.

Here are all the major changes we have made to Hooks since the first alpha release:

  • Delete ‘useMutationEffect’. (@sophiebits proposed in #14336)
  • willuseImperativeMethodsRename to ‘useImperativeHandle’. (@threepointonePut forward to# 14565)
  • Avoid touseState 和 useReducerHooks render when the same value is passed in. (@acdlitePut forward to# 14569)
  • No comparison is passed touseEffect/useMemo/useCallbackFirst argument to Hooks. (@gaearonPut forward to# 14654)
  • useObject.isAlgorithm to compareuseState 和 useReducerThe value of the. (@JessidhiaPut forward to# 14752)
  • Only use Hooks to render components twice in strict mode (DEV only). (posted by @gaearon on #14654)
  • To improve theuseReducerHook delay initialization API. (@acdlitePut forward to# 14723)



Good article recommendation:

What does Facebook look for in front end engineers? Take a look



英文原文 :

React v16.8: The One With Hooks


UC International Technology is committed to sharing high quality technical articles with you

Please follow our official account and share this article with your friends