React is a pattern of component-oriented programming, which contains two types of components: functional components and class components

functional components

A basic function component looks like this

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>hello_react</title>
  </head>
  <body>
    <!-- 准备好一个“容器” -->
    <div id="test"></div>
    <!-- 引入react核心库 -->
    <script type="text/javascript" src="./js/react.development.js"></script>
    <!-- 引入react-dom，用于支持react操作DOM -->
    <script type="text/javascript" src="./js/react-dom.development.js"></script>
    <!-- 引入babel，用于将jsx转为js -->
    <script type="text/javascript" src="./js/babel.min.js"></script>
    <script type="text/babel">
      // 1、创建函数式组件
      function Demo() {
        return <h1>函数式组件</h1>;
      }
      // 2、渲染组件
      ReactDOM.render(<Demo />, document.getElementById("test"));
    </script>
  </body>
</html>

The page effect is as follows:

Note on function names

Note that when rendering components, the function name needs to be written in the form of html tags. Also, function names cannot be lowercased:

// 1、创建函数式组件
function demo() {
  return <h1>函数式组件</h1>;
}
// 2、渲染组件
ReactDOM.render(<demo />, document.getElementById("test"));

As above, if written in lowercase, the console will report an error

This is related to the grammar rules of Jsx

Encounter the code starting with <, parse it with the syntax of the tag: html tags with the same name are converted into html elements with the same name, other tags need special parsing

function executor

In the above code, we did not execute the Demo function, but when we used it as a label, react helped us execute this function.

this inside the function points to

Normally, this in a function should point to window, but in the following example, this will be undefined

<script type="text/babel">
  // 1、创建函数式组件
  function Demo() {
    console.log("this", this);
    return <h1>函数式组件</h1>;
  }
  // 2、渲染组件
  ReactDOM.render(<Demo />, document.getElementById("test"));
</script>

The reason is very simple. Our code is executed in the babel environment, and bable will enable strict mode, so that the point of this is not window.

We can verify it by opening the bable official website,

Copy the above code into

It can be seen that our functional components will eventually be compiled into an ordinary function (this confirms that JSX is syntactic sugar).

class component

A basic class component looks like this

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>hello_react</title>
  </head>
  <body>
    <!-- 准备好一个“容器” -->
    <div id="test"></div>
    <!-- 引入react核心库 -->
    <script type="text/javascript" src="./js/react.development.js"></script>
    <!-- 引入react-dom，用于支持react操作DOM -->
    <script type="text/javascript" src="./js/react-dom.development.js"></script>
    <!-- 引入babel，用于将jsx转为js -->
    <script type="text/javascript" src="./js/babel.min.js"></script>
    <script type="text/babel">
      // 1、创建类组件
      class MyComponent extends React.Component {
        render() {
          return <h1>这是一个类组件</h1>;
        }
      }
      // 渲染组件
      ReactDOM.render(<MyComponent />, document.getElementById("test"));
    </script>
  </body>
</html>

page effect

How to write class components

Class components must inherit the parent class of React.Component , and the render function must be called inside the function

class MyComponent extends React.Component {
  render() {
    return <h1>这是一个类组件</h1>;
  }
}

We know that the use of the class must use the new keyword, but we have not used the above code, so when was the instance of MyComponent created?

React does it for us when rendering components.

ReactDOM.render(<MyComponent />, document.getElementById("test"));

After executing the code:

react parses the component tag and finds the MyComponent component
It is found that the component is defined using a class, and then an instance of the new class is created, and the render method on the prototype is called through the instance
Convert the virtual Dom returned by render to real Dom, and then render it on the page

render function

render function definition location

According to the knowledge of the class, the render function is defined on the prototype of the MyComponent class, we open the console to verify

The this in the render function points to

According to the knowledge of the class, we know that this in render should be the instance object of MyComponent

we print

// 1、创建类组件
class MyComponent extends React.Component {
  render() {
    console.log("render中的this", this);
    return <h1>这是一个类组件</h1>;
  }
}

It can be seen that this is indeed the instance object of MyComponent, and it can also be verified that the render method of MyComponent exists on the prototype of the instance object

properties in the component

Observing the printed instance object, we can find that there are many attribute methods on the instance object, such as context, props, etc.

We did not define these methods in the MyComponent class, so it must come from the inherited parent class React.Component. The attribute methods on these components are what we need to be familiar with next.

React's two ways to create components (2)