This is the 15th day of my participation in Gwen Challenge

Why is immutability important in React?

  • Immutability refers to replacing old data with new data instead of directly modifying it.
  • Advantages of immutability:
  1. Undo and rollback operations are common in development, and not directly modifying the data can help us better trace back data.
  2. Easier to track changes in data.
  3. Easy to determine React re-render timing.

The slice function returns a copy of the array

  • This method is something we must master.
const arr = [1.2.3.4];

arr.slice()  / / [1, 2, 3, 4]
console.log(arr === arr.slice()); //false
Copy the code

JSX profile

const element = <h1>Hello, world!</h1>;
Copy the code

Interpretation of the

  • JSX is a syntactic extension of JavaScript.
  • JSX can generate React elements.

Why use JSX?

React considers rendering logic intrinsically coupled to other UI logic. Instead of separating markup and logic into separate files, React creates separation of concerns by storing them together in loosely coupled units called “components.” Putting JSX and UI together in JavaScript code can be visually helpful. It also enables React to display more useful error and warning messages.

Interpretation of the

  • The first thing we need to understand is what is coupling? A: Coupling represents the degree to which two subsystems (or classes) are related. React thinks that rendering logic is more connected to other UI logic, and putting JSX and UI together in JS will help us display more errors and warnings.

JSX is also an expression

  • You can use JSX in an if or for statement, return JSX, assign a value to a variable, and pass JSX as an argument.
  • When compiled, the JSX expression is converted into a normal JavaScript function call.

JSX specific properties

  1. The case where the attribute value is literal can be introduced in quotes.
const element = <div tabIndex="0"></div>;
Copy the code
  1. When the property value is a JS expression, you need to use curly braces to import it.
const element = <img src={user.avatarUrl}></img>;
Copy the code

Matters needing attention:

JSX uses small hump naming to name attributes, for example: the class in JSX becomes className and tabIndex becomes TabIndex.

Use JSX to specify child elements

  • Single label format
const element = <img src={user.avatarUrl} />;
Copy the code
  • The JSX tag contains many elements.
const element = (
  <div>
    <h1>Hello!</h1>
    <h2>Good to see you here.</h2>
  </div>
);
Copy the code

JSX prevents injection attacks

Official description: The React DOM escapes by default before rendering all input. It ensures that you never inject content into your application that you didn’t explicitly write. All content is converted to a string before rendering. This effectively prevents XSS (cross-site scripting) attacks.

The React base is ready for use.

JSX stands for object

  • Not only does Babel have the ability to convert ES6 to ES5, it can also translate JSX syntax into a function call called react.createElement (). The following two types of code are equivalent.
const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);
Copy the code
const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world! '
);
Copy the code
  • React.createelement () actually creates such an object.
const element = {
  type: 'h1'.props: {
    className: 'greeting'.children: 'Hello, world! '}};Copy the code

In layman’s terms, Babel translates JSX syntax into JS objects. React reads these objects and uses them to build the DOM and keep things up to date.