React function component

How to create a function component

  • Arrow function form
const Hello = (props) => { return <div>{props.message}</div> }
// Can be abbreviated as
const Hello = props => <div>{props.message}</div>
  • function form
function Hello(props) {
  return <div>{props.message}</div>

Function components have less code than class components

Take a look at this example and implement + 1 as well

class component

class App extends React.Component {
  constructor(props) {
    this.state = {
      n: 1
  click = () => {
    this.setState(state => ({
      n: state.n + 1
  render() {
    return (
        <button onClick={}>+1</button>

Function component

const App = props => {
  const [n, setN] = useState(0)
  const click = () => {
    setN(n + 1)
  return (
      <button onClick={click}>+1</button>

It seems that functional components really have great advantages

Can I use a function component instead of a class component?

Faced with two problems

  • Function component has no state
  • Function component has no lifecycle

What if there's no State?

React v16.8.0 introduces Hooks API, one of which is called useState to solve the problem

import React, { useState } from 'react';

function Example() {
  // Declare a state variable called "count"
  const [count, setCount] = useState(0);

  return (
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me

What if there is no life cycle?

React v16.8.0 introduces Hooks API, one of which is called useEffect, which can solve the problem

  • Simulate componentDidMount
useEffect(()=> { console.log('First render') }, [])
// When the first parameter is [], the function is executed only once at the beginning

The second parameter of useEffect is the state attribute to be monitored. If omitted, it means to monitor the changes of all state attributes. If empty, it means not to monitor any state attributes

If you specify the to listen   state   Object, then only this one will be monitored   state   Properties. Changes in other properties will not trigger the execution of the function

  • Simulate componentDidUpdate
useEffect(() => { console.log('Any attribute change') })
useEffect(()=> { console.log('n Changed') }, [n])
// Listen for all properties when the second parameter is not passed in
// When [n] is passed in, only n is listened to 

However, this does not really simulate componentDidUpdate, because it will not be executed at the first rendering, and the above code cannot do this

So in order to fix this problem, we need to add some code

const [nUpdateCount, setNUpdateCount] = useState(0)
  useEffect(() => {
    setNUpdateCount(nUpdateCount => nUpdateCount + 1)
  }, [n])
  useEffect(() => {
    if (nUpdateCount > 1) {
      console.log('Updated once')
  }, [nUpdateCount])

We can pass   nUpdateCount   To solve this problem, nupdatecount   Detected   n   The first change, heavy   0   Become   1, and   useEffect   Medium judgment   nUpdateCount   greater than   one   Start execution only when

However, such code seems to be a little cumbersome and can continue to be optimized

Write a   useUpdate   Function, fn   Is the function executed during update, and dey is the listening object. This function can be extracted and processed from components and directly applied when in use

const useUpdate = (fn, dey) => {
  const [count, setCount] = useState(0)
  useEffect(() => {
    setCount(count => count + 1)
  }, [dey])
  useEffect(() => {
    if (count > 1) {fn()}
  }, [count, fn])

Directly called in component   useUpdate

useUpdate(() => {console.log('Updated once')}, n)
  • Simulate componmentWillUnmount
useEffect(() => {
  console.log('The data is updated')
  return () => {
    console.log("I'm going to be destroyed")

useEffect can return another function, which will be called when the component disappears, while console.log('data updated ') will be called when the component changes and re renders

  • Simulate shouldComponentUpdate
const MyComponent = React.memo(
    (prevProps, nextProps) => nextProps.count !== prevProps.count

React.memo wraps a component for shallow comparison of its props, but it is not a hooks because its writing is different from hooks. In fact, react.memo is equivalent to PureComponent, but it only compares props.

Keywords: React

Added by mcatalf0221 on Fri, 26 Nov 2021 16:08:09 +0200