Lifecycle with ReactJs FunctionComponent

综合技术 2018-02-06

Author: @sosukesuzuki
Source: Qiita

Hello. I’m Sosuke Suzuki of Boostnote maintainer. Boostnote is written in React. Boostnote has been passed time since the development, and there are components that are bloated in many places. Thanks to contributors as well, those components are getting better than before, but they are being Unobtrusive. I’m thinking about doing something about it and this article is about how to do it.

As much as possible “Stateless FunctionalComponent”

Since bloated components are hard to read and difficult to manage, it is necessary to divide the components into appropriate sizes. Important things in dividing, eliminate all State that can be omitted and make components as StatelessFunctionalComponent as possible. It is obvious that we don’t hold the state by implementing it as “StatelessFunctionalComponent” instead of extends React.Component.

12345// Example of StatelessFunctionalComponent
const component = ({hoge, huga}) => (
  

{hoge}

{huga}

)

Even if it is inevitable for a component to possess a state to a certain extent, I want to reduce the number of parts that I have to pay attention to state management.

Life cycle is HigherOrderComponent (HOC)

For such reasons, it is often easier for people to use “Stateless FunctionalComponent”, but as a disadvantage in creating applications, “Stateless FunctionalComponent” alone can’t handle “lifecycle”. In order to realize that, it is necessary to use “HigherOrderComponent”. HigherOrderComponent is implemented by a function that takes a React component as an argument and returns a React component as an argument. The type signature in like Haskell would be as follows. “hocFactotry” is the name of the function that is the factory of HOC (HigherOrderComponent), W is the React component passed to the argument, and E is the React component of the return value. HigherOrderComponent:: W: React.Component => E: React.Component HOC enhances the abstraction of components and enables further reuse. With HOC you can hook the lifecycle of StatelessFunctionalComponent. You can use it for various other things, but this article does not give a detailed explanation about HOC. The FaceBook official document, Franleplant ‘s React Higher Order Component in depth etc are very easy to understand about HOC. HigherOrderComponent:: W: React.Component => E: React.Component

12345678910111213141516const InputComponent = ({hoge, boo}) => (
 

{hoge}

{boo}

) function logProps(WrappedComponent) { return class extends React.Component { componentWillReceiveProps(nextProps) { console.log(‘Current props: ‘, this.props); console.log(‘Next props: ‘, nextProps); } render() { return ; } } } const EnhancedComponent = logProps(InputComponent);

Even if this method is adopted, the component returned by HOC needs to be described using extends React.Component
. As the number of components taking this form increases, the class declaration and render become boilerplates.

Easier HOC with recompose

There is a library called recompose. This library is a utility function for HOC and is called react version lodash. There are various functions in this library, they can see the document in recomponse’s Github As mentioned above HOC has various uses, there are many functions for them. Functions related to life cycle are only a few. That’s why I think we can introduce it relatively easily. This area is really like lodash. You can use only the necessary functions as appropriate, and the library itself does not have a complicated structure. The function required to easily implement the life cycle with HOC is the lifecycle function. The lifecycle function has the following type signature. lifecycle :: spec: Object => H: HigherOrderComponent
And it is used like this.

12345678910const PostsList = ({ posts }) => (
  
    {posts.map(p =>
  • {p.title}
  • )}
) const PostsListWithData = lifecycle({ componentDidMount() { fetchPosts().then(posts => { this.setState({ posts }); }) } })(PostsList);

State in the lifecycle argument is passed as props to the component passed to the HOC argument. Also, the lifecycle type signature can be rewritten as. lifecycle :: spec: Object => W: React.Component => E:Component
It is natural that the type of HOC is HOC :: W: React.Component => E: React.Component
, but for those using Haskell, it may be easier to understand who wrote it as described above.

Summary

If you use HOC with “recompose”, you can easily handle lifecycle with “StatelessFunctionalComponent”. I think that you should use it because it reduces the consideration of the state and makes the description concise. I also wants to divide this component moderately in this way in Boostnote.

您可能感兴趣的

Learn Django, Laravel, React and more frameworks a... Mobile and web apps remain hot commodities. With a host of app development frameworks designed to help you save time by cutting down on excess code an...
React JS vs Vue JS – Which Javascript Framework To... ReactJSin 2016 has positioned itself as the king of Javascript web frameworks . The year 2017 has been observing a rapid growth of both its web an...
自建最轻量的react+webpack+es6架构 一、初始化项目 $ mkdir my-app & cd my-app $ npm install --yes 二、安装依赖库 # 必备react基础模块 $ npm install --save react react-dom # 必备webpac...
#Angular or #React – Try Both It’s Worth It #angul... Most of the things that I’m going to describe in this post are well know for the people that already use ReactJs however if you don’t know it (li...
用WijmoJS搭建您的前端Web应用 —— React 前文回顾 在本系列文章中,我们已经介绍了 Angular 和 Vue 框架下 WijmoJS 的玩法。 而今天,我们将展示如何使用 WijmoJS 来搭建一款具备独特创新性、出色性能和简单代码逻辑的 React 应用。 React简介 由于React设计思想极其独特,属于...