Writing in the front

The react how to learn

For students with experience in Vue development, react can be used to learn some syntax in Vue, but they must pay attention to the differences between them. For example, useState can be used to learn ref and Reactive in Vue, so that some concepts in React can be easily and quickly understood.

For those who have no experience in Vue development, it is a good idea to refer to the React official documentation and follow the tic-tac-toe project to understand how React implements a function and how to dismantle components.

The basic use

It’s very similar to vue, except that the difference between single brace and double brace is that you can use operators, variables, or functions, and expressions

import React from "react";
import ReactDom from "react-dom";

let name = {
    first: "Big".last: "Also"};let fullName = function (user) {
    return <h2> {user.first + user.last}</h2>;
};
let changeName = function (user) {
    if (user) {
        fullName(user);
    } else {
        return <h2>User not found</h2>; }};// Render to page
ReactDom.render(<h2>{changeName(name)}</h2>.document.querySelector("#root"));
Copy the code

React provides a more flexible way to store the DOM in JS, compared to vUE, which stores all data in data. The H2 element returned here is JSX instead of dom element. JavaScript+ XML makes rendering more efficient. React also updates only the elements that need to be changed, thus avoiding a redraw of the entire page

Loop binding

import React from "react";
import ReactDom from "react-dom";

let arr = [1.2.3.4]
// Use map to traverse arrays (elements in objects, be sure to bind keys)
ReactDom.render(<ul>{arr.map((item, index) => {
    return <li key={index}>{item}</li>
})}

</ul>.document.querySelector("#root"));
Copy the code

Use map instead of filter or foreach because map can return and the other two cannot

componentization

Function declaration

case
import React from "react";
import ReactDom from "react-dom"; 

function Com(props){
    return <h2>hello,{props.hello}</h2>
}
ReactDom.render(<Com hello={'big also} / >.document.querySelector("#root"));
Copy the code
Pay attention to

  1. Be sure to capitalize the component name; if it is not capitalized, the browser automatically recognizes it as an element

  2. A functional declaration must include a return that returns the component’s content

Class declaration

case
import React from "react";
import ReactDom from "react-dom";

class Cnm extends React.Component {
  // Use the render function to render the virtual DOM into the real DOM
    render() {
        return <a href={this.props.href}>{this.props.hello}</a>

    }
}

ReactDom.render(<Cnm hello={'big also'}href={'https://www.baidu.com'} / >.document.querySelector("#root"));
Copy the code
Pay attention to
  1. To use the class declaration approach, you must inherit from React.component
  2. Class must have a render function
  3. In the render function, return a JSX element
  4. Start with a capital letter ！！！！

Communication in parent and child components

React follows a one-way data flow

My understanding is that the source of the data is controllable, such as the source of the data from props, or the source of the data from redux

hooks

useState

Function: Gives functional components the ability to be state responsive in class components

const [aa, setAa] = useState(false);// The following initial value can be of any type
Copy the code

useEffect

Function: lifecycle merge API, which can handle some processing at load completion, destruction, such as request data, or DOM operations, in return function, put destruction need to be processed.

  useEffect(() = > {
    document.title = `today`;
    return () = >{
      clearTimeout()}});Copy the code

These are the two most commonly used, while the others can be understood as useMemo, for example, can be used to optimize useState performance.

We welcome your correction