preface

The school started, but since the end of the defense, the state has been unable to return. I don't want to study or move. I just want to sleep and play, but I worry every day for no reason. I didn't brush the interview questions, didn't practice the physical test, etc.

More or less anxious, yes.

No matter how much, this time simply record some confused points of React encountered in the process of doing the project.

Some incomprehensible points in React

In fact, there are quite a few. The main reason is that the foundation is relatively poor. In the process of doing it, there are often various errors in the details. After correction, they also have a little knowledge. Now come back and have a good health.

1. Props and State

In contrast, the main difference between props and state is that props is immutable and state is variable. Therefore, components update and change data by defining state, and sub components can only transfer data through props.

In practical application, you can set state in the parent component, and then use props to pass values on the child component, which is commonly used in render. For example, in a project, whether the modal box is displayed or not is to set a state (show) in the parent component? true: false), and then it is usually controlled by using visible props in sub components.

Generally speaking, state is more like people's mood, and props is more like people's behavior( May, personal understanding.)

2. Class components and function components

It seems that from a simple point of view, function is a function component (after all, there are functions), and class components are class,

function HelloWorld(props){
    return (<h1>Hello World!</h1>)
}
// function component

class Welcome extends React.component{ //Inherit component class
    render() //With render function
    {
        return <h1>Hello World!</h1>;
    }

}
//class component

You can write an expression directly in the function component, and then directly return. Class components must contain the render function and return.

  3. Arrow function

This arrow function is very interesting. In fact, I don't understand the reason when doing a project, but it's good to replace it with an arrow function when there are problems in the expression( It feels like a simplified version of an anonymous function)

  The difference is that the call time is also different. The arrow function does not need to be used with bind,
1. update() {}                this.update.bind(this)
2. update = () => {}       this.update

4. Hooks

This Hooks is something that has not been understood in the process of this project. It seems to be a relatively simple way to write function components.

It is said in other articles that the React team advocates the use of functional components rather than class components, but functional components do not have state management and life cycle, so it is not particularly good. However, the code of class components in a simple page is too complex. In order to solve the problems of full-featured but heavy class components and light but limited functions, React team designed Hooks, an enhanced version of function components, which can write full-featured components without class at all.

The four most commonly used hooks:

• useState()
• userContext()
• userReducer()
• useEffect()

1. useState status hook

import React, {useState} from 'react'
const AddCount = () => {
  const [ count, setCount ] = useState(0)
  const addcount = () => {
    let newCount = count
    setCount(newCount+=1)
  } 
  return (
    <>
      <p>{count}</p>
      <button onClick={addcount}>count++</button>
    </>
  )
}
export default AddCount 

In useState(), it accepts the initial value of the state as a parameter, that is, the initial value of the count in the above example. It returns an array, in which the first item of the array is a variable, pointing to the current value of the state. Similar to this.state, the second item is a function to update the state, similar to setState. For the naming of this function, we agree to prefix set with the variable name of state.

2. useContext sharing status hook

Share state between components. Usually one createContext and the other useContext

import React,{ useContext } from 'react'
const Ceshi = () => {
  const AppContext = React.createContext({})
  const A =() => {
    const { name } = useContext(AppContext)
    return (
        <p>I am A Name of the component{name}<span>I am A Sub components of{name}</span></p>
    )
}
const B =() => {
  const { name } = useContext(AppContext)
  return (
      <p>I am B Name of the component{name}</p>
  )
}
  return (
    <AppContext.Provider value={{name: 'hook test'}}>
    <A/>
    <B/>
    </AppContext.Provider>
  )
}
export default Ceshi 

For details: https://www.jianshu.com/p/d600f749bb19