【 Youth Training camp 】-React

Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”

This article has participated in the “Digitalstar Project” and won a creative gift package to challenge the creative incentive money.

React

React is a component-based declarative UI library for building efficient, fast user interfaces.

The characteristics of the React

Declarative writing

You just describe what the UI (HTML) looks like, just like you write HTML, React is responsible for rendering the HTML that you write, right

componentization

React everything is a component. We typically break down the entire logic of an application into small, individual pieces. We call each individual part a component. Typically, a component is a javascript function that takes input, processes it, and returns the React element rendered in the UI.

How to create a React project

Method 1 (recommended) : Use the official scaffolding create-React-app to create a project

npx create-react-app my-app
Copy the code

After the creation, the my-app folder is displayed in the current directory. CD my-app and run NPM start or YARN start

Method 2: Install create-react-app globally

npm install -g create-react-app
Copy the code

Then create the project using create-react-app

create-react-app my-app
Copy the code

After creation, enter NPM start to run the CD

JSX grammar

JSX is a JavaScript based extension syntax that can be easily used to describe the UI in React. JSX is itself an expression, and when compiled, the JSX expression becomes a normal JavaScript object. Such as:

// jsx
const element = (
    <h1 className="greeting">
        Hello World
    </h1>
);
Copy the code

The above JSX code is converted to React elements inside React

/ / the React elements
const element = {
    type: 'h1'.props: {
        className: 'greeting'.chindren: 'Hello World'}}Copy the code

Class components

class ArticleList extends React.Component {
    render() {
        const { articles }  this.props
        return articles.map(item= > {
            const { title } = item
            return <div>{ title }</div>}}})Copy the code

Function component

function ArticleList() {
  const { articles }  this.props
    return articles.map(item= > {
      const { title } = item
      return <div>{ title }</div>})}/ / or
const ArticleList = (props) = > {
  // ...
}
Copy the code

Difference between a class component and a function component

In a function component, there is no this, no State, and no way to use the component’s lifecycle methods, as there are in a class component

BTW: Use useState to change state in function components, use useEffect to make up for the fact that function components have no life cycle, use this.setState to change state in class components, and use life cycle functions such as componentDidMount.
Because class components need to be instantiated but function components do not, function components perform better than class components

React Hooks

React hooks useState, useEffect, useContext, useReducer…

useState

const [ state, setState ] = useState(0)
Copy the code

UseState takes an initial value and returns an array with the current state as the first item and the function to update the state as the second. For example, 0 in useState(0) is the initial value of state.

UseState can accept not only an initial value, but also a function action that returns the value as the new state, for example:

const [ time, setTime ] = useState(new Date())
Copy the code

The setState function is used to update state by receiving a new state value and enqueuing a re-rendering of the component.

useEffect

UseEffect is usually used as a lifecycle function for a function component, which takes two arguments, the first being when a dependency

The function to be executed when the DEP is updated. The second argument is the dependent DEP to listen on

All updates are performed if no second argument is passed. If an empty array is passed in, it is executed only when the page is mounted and unmounted

useEffect(() = > {
  console.log('useEffect')})// All updates are executed
Copy the code

useEffect(() = > {
  consoe.log('useEffect')
},[]) // Only when the page is rendered and updated
Copy the code

useEffect(() = > {
  console.log('useEffect')
},[like])        // Execute only on like updates
Copy the code

Note: If a function is returned inside useEffect, React operates on it when useEffect is executed

Custom anti – shake hook

export default function() {
  const [counter, setCounter] = useState(0);

  const handleClick = useDebounce(function() {
    setCounter(counter + 1)},1000)

  return (
  <div style={{ padding: 30}} >
    <Button
      onClick={handleClick}
    >click</Button>
    <div>{counter}</div>
  </div>)}Copy the code

Note: Custom hook function names must start with use

Function as Children Component

As the name suggests: Use functions as child components in the parent component. JS expressions inserted into JSX are converted to strings, React elements, or arrays. Children can pass any type of data just like any other argument, that is, you can pass the callback function as an argument to the component

Normally, JavaScript expressions inserted in JSX will evaluate to a string, a React element, or a list of those things. However, props.children works just like any other prop in that it can pass any sort of data, not just the sorts that React knows how to render. For example, if you have a custom component, you could have it take a callback as props.children

// Calls the children callback numTimes to produce a repeated component
function Repeat(props) {
  let items = [];
  for (let i = 0; i < props.numTimes; i++) {
    items.push(props.children(i));
  }
  return <div>{items}</div>;
}

function ListOfTenThings() {
  return (
    <Repeat numTimes={10}>
      {(index) => <div key={index}>This is item {index} in the list</div>}
    </Repeat>
  );
}
Copy the code

In the example above, the functional component Repeat calls the passed function with a for loop, pushes the returned result into the array, and eventually renders each div element in the list in the page

What does FACC do

It can treat functions as child elements of components, keeping the rendering logic in its own component rather than delegating it. The advantage of this is that as the project grows, components are reused more and more, effectively increasing code reuse rates.