Shulou(Shulou.com)06/02 Report--

This article mainly introduces "how to write react components". In daily operation, I believe many people have doubts about how to write react components. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful for you to answer the doubts of "how to write react components". Next, please follow the editor to study!

Class Based Components (class-based components)

Class based components has its own state and methods. We will use these components as carefully as possible, but they have their own usage scenarios.

Next, let's write the component one by one.

Import CSS

Import React, {Component} from 'react' import {observer} from' mobx-react' import ExpandableForm from'. / ExpandableForm' import'. / styles/ProfileContainer.css'

I like CSS in JS very much, but it is still a new idea, and a mature solution has not yet been produced. We imported its css file in each component.

Translator's note: at present, CSS in JS can be solved by using css modules solution, which is already provided by webpack's css-loader.

We also use a blank line to distinguish our dependencies.

Translator's note: that is, blank lines are added separately between lines 4 and 5 and lines 1 and 2.

Initialize state

Import React, {Component} from 'react' import {observer} from' mobx-react' import ExpandableForm from'. / ExpandableForm' import'. / styles/ProfileContainer.css' export default class ProfileContainer extends Component {state = {expanded: false}

You can also initialize state in constructor, but we prefer this concise approach. We will also ensure that the class of the component is exported by default.

PropTypes and defaultProps

Import React, {Component} from 'react' import {observer} from' mobx-react' import {string, object} from 'prop-types' import ExpandableForm from'. / ExpandableForm' import'. / styles/ProfileContainer.css' export default class ProfileContainer extends Component {state = {expanded: false} static propTypes = {model: object.isRequired, title: string} static defaultProps = {model: {id: 0}, title: 'Your Name'}

PropTypes and defaultProps are static attributes and should be declared at the top of the code whenever possible. These two attributes act as documentation and should be visible to developers who read the code at a glance. If you are using react 15.3.0 or later, use prop-types instead of React.PropTypes. All your components should have propTypes attributes.

Method

Import React, {Component} from 'react' import {observer} from' mobx-react' import {string, object} from 'prop-types' import ExpandableForm from'. / ExpandableForm' import'. / styles/ProfileContainer.css' export default class ProfileContainer extends Component {state = {expanded: false} static propTypes = {model: object.isRequired, title: string} static defaultProps = {model: {id: 0} Title: 'Your Name'} handleSubmit = (e) = > {e.preventDefault () this.props.model.save ()} handleNameChange = (e) = > {this.props.model.changeName (e.target.value)} handleExpand = (e) = > {e.preventDefault () this.setState ({expanded:! this.state.expanded})}

With class components, when you pass methods to subcomponents, you need to make sure that these methods are called with the correct values. It is usually implemented using this.handleSubmit.bind (this) when passing to child components. Of course, it is more concise to use the arrow function of es6.

Translator's note: you can also bind the context of a method in constructor:

Constructor () {this.handleSubmit = this.handleSubmit.bind (this);}

Pass a function to setState as an argument (passing setState a Function)

In the example above, we did this:

This.setState ({expanded:! this.state.expanded})

SetState is actually executed asynchronously, and react integrates state changes for performance reasons, and then handles them together, so when setState is called, state does not necessarily change immediately.

This means that you can't rely on the current state value when calling setState-because you can't be sure what state is when setState is actually called.

The solution is to pass a method to setState that takes the last state as a parameter.

This.setState (prevState = > ({expanded:! prevState.expanded})

Deconstructing props

Import React, {Component} from 'react' import {observer} from' mobx-react' import {string, object} from 'prop-types' import ExpandableForm from'. / ExpandableForm' import'. / styles/ProfileContainer.css' export default class ProfileContainer extends Component {state = {expanded: false} static propTypes = {model: object.isRequired, title: string} static defaultProps = {model: {id: 0} Title: 'Your Name'} handleSubmit = (e) = > {e.preventDefault () this.props.model.save ()} handleNameChange = (e) = > {this.props.model.changeName (e.target.value)} handleExpand = (e) = > {e.preventDefault () this.setState (prevState = > ({expanded:! prevState.expanded}))} render () {const {model Title} = this.props return ({title})}}

For components with a lot of props, each property should be deconstructed with a separate line, as written above.

Decorator (Decorators)

@ observer export default class ProfileContainer extends Component {

If you are using a state manager similar to mobx, you can describe your components in the above way. This is the same as passing a component as an argument to a function. Decorators is a very flexible and easy-to-read way to define component functions. We use mobx and mobx-models in conjunction with the decorator.

If you don't want to use the decorator, you can do it as follows:

Class ProfileContainer extends Component {/ / Component code} export default observer (ProfileContainer)

Closure

Avoid passing closures to subcomponents as follows:

{model.name = e.target.value}} / / ^ Don't write like this, write as follows: onChange= {this.handleChange} placeholder= "Your Name" / >

The reason is that each time the parent component re-renders, a new function is created and passed to input.

If the input is a react component, this will cause the component to re-render regardless of whether the other properties of the component have changed or not.

Moreover, passing in the method of the parent component makes the code easier to read, easier to debug, and easier to modify.

The complete code is as follows:

Import React, {Component} from 'react' import {observer} from' mobx-react' import {string, object} from 'prop-types' / / Separate local imports from dependencies import ExpandableForm from'. / ExpandableForm' import'. / styles/ProfileContainer.css' / / Use decorators if needed @ observer export default class ProfileContainer extends Component {state = {expanded: false} / / Initialize state here (ES7) or in a constructor method (ES6) / / Declare propTypes as static properties as early as possible static propTypes = {model: object.isRequired Title: string} / / Default props below propTypes static defaultProps = {model: {id: 0} Title: 'Your Name'} / / Use fat arrow functions for methods to preserve context (this will thus be the component instance) handleSubmit = (e) = > {e.preventDefault () this.props.model.save ()} handleNameChange = (e) = > {this.props.model.name = e.target.value} handleExpand = (e) = > {e.preventDefault () this.setState (prevState = > ({expanded: ! prevState.expanded})} render () {/ / Destructure props for readability const {model Title} = this.props return (/ / Newline props if there are more than two {title} {model.name = e.target.value}} / / Avoid creating new closures in the render method- use methods like below onChange= {this.handleNameChange} placeholder= "Your Name" / >)}}

Function component (Functional Components)

These components have no state and methods. They are pure, very easy to locate problems, and you can use as many of these components as possible.

PropTypes

Import React from 'react' import {observer} from' mobx-react' import {func, bool} from 'prop-types' import'. / styles/Form.css' ExpandableForm.propTypes = {onSubmit: func.isRequired, expanded: bool} / / Component declaration

Here we define propTypes before the component declaration, which is very intuitive. We can do this because of js's function name promotion mechanism.

Destructuring Props and defaultProps (deconstructing props and defaultProps)

Import React from 'react' import {observer} from' mobx-react' import {func, bool} from 'prop-types' import'. / styles/Form.css' ExpandableForm.propTypes = {onSubmit: func.isRequired, expanded: bool, onExpand: func.isRequired} function ExpandableForm (props) {const formStyle = props.expanded? {height: 'auto'}: {height: 0} return ({props.children} Expand)}

Our component is a function, and props is passed in as an input parameter to the function. We can extend the component as follows:

Import React from 'react' import {observer} from' mobx-react' import {func, bool} from 'prop-types' import'. / styles/Form.css' ExpandableForm.propTypes = {onSubmit: func.isRequired, expanded: bool, onExpand: func.isRequired} function ExpandableForm ({onExpand, expanded = false, children, onSubmit}) {const formStyle = expanded? {height: 'auto'}: {height: 0} return ({children} Expand)}

We can set the default value for the parameter as defaultProps. If expanded is undefined, set it to false. (this way of setting the default value is very useful for the input parameters of the object class, and the error of `can't read property XXXX of undefined can be avoided)

Do not use the es6 arrow function:

Const ExpandableForm = ({onExpand, expanded, children}) = > {

In this way, a function is actually an anonymous function. If babel is used correctly, it is not a problem, but if not, the runtime will cause some errors, which is very inconvenient for debugging.

In addition, using anonymous functions in Jest, a test library for react, can also cause some problems. Because of the potential problems with using anonymous functions, we recommend using function instead of const.

Wrapping

Decorators cannot be used in function components, and can be passed to the observer function as an input parameter

Import React from 'react' import {observer} from' mobx-react' import {func, bool} from 'prop-types' import'. / styles/Form.css' ExpandableForm.propTypes = {onSubmit: func.isRequired, expanded: bool, onExpand: func.isRequired} function ExpandableForm ({onExpand, expanded = false, children, onSubmit}) {const formStyle = expanded? {height: 'auto'}: {height: 0} return ({children} Expand)} export default observer (ExpandableForm)

The complete components are as follows:

Import React from 'react' import {observer} from' mobx-react' import {func, bool} from 'prop-types' / / Separate local imports from dependencies import'. / styles/Form.css' / / Declare propTypes here, before the component (taking advantage of JS function hoisting) / / You want these to be as visible as possible ExpandableForm.propTypes = {onSubmit: func.isRequired, expanded: bool, onExpand: func.isRequired} / / Destructure props like so, and use default arguments as a way of setting defaultProps function ExpandableForm ({onExpand, expanded = false, children OnSubmit}) {const formStyle = expanded? {height: 'auto'}: {height: 0} return ({children} Expand)} / / Wrap the component instead of decorating it export default observer (ExpandableForm)

Using conditional judgment (Conditionals in JSX) in JSX

Sometimes we need to write a lot of judgment logic in render, which is something we should avoid:

There are currently some libraries to solve this problem, but instead of introducing other dependencies, we have solved it in the following ways:

Here we solve the problem by executing the function immediately, putting the if statement into the immediately executing function and returning whatever you want to return. It is important to note that executing the function immediately can cause some performance problems, but this effect is negligible for the readability of the code.

Similarly, don't do this when you only want to render under certain circumstances:

{isTrue?

True!

:}

Instead, you should do this:

{isTrue & &

True!

At this point, the study on "how to write react components" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.