React component basics

Leave a Comment / / 游魂博客

Original link: https://www.iyouhun.com/post-223.html

Introduction to React Components

Components allow you to split your UI into independently reusable pieces of code, and think about each piece independently.

Components represent some of the functions in the page, and combine multiple components to achieve a complete page.

Features : reusable, independent, combinable.

Two ways to create React components

React create component method:

  1. use function
  2. use class

functional component

1) What is a functional component?

  • Components created with JS functions (plain, arrow).

2) Define function components

  • Syntax conventions
    • 首字母必需大写, which React uses to distinguish components from HTML elements.
    • The function必须有返回值representing the UI structure of the component, or null if nothing is rendered.
 // 普通函数function Header() { return <div>头部组件</div>; } // 箭头函数const Footer = () => { return <div>底部组件</div>; }; // 不渲染内容const Loading = () => { const loading = false; return loading ? <div>正在加载...</div> : null; };

3) Use components

  • The name of the function is the name of the component, and to use the component is to use the name of the component as a label.
  • Component tags can be single or double.
 import ReactDom from 'react-dom'; // 普通函数function Header() { return <div>头部组件</div>; } // 箭头函数const Footer = () => { return <div>底部组件</div>; }; // 加载组件，不渲染内容const Loading = () => { const loading = false; return loading ? <div>正在加载...</div> : null; }; // 根组件const App = () => { return ( <> <Header /> <Loading /> <Footer /> </> ); }; ReactDom.render(<App />, document.getElementById('root'));

Summarize

  • Create a function component, capitalize the first letter, need to return a value, return null without rendering.
  • When using function components, the component name can be used as a label.

class component

class syntax

Review defining classes, defining attributes, and defining functions.

 // 动物class Animal { address = '地球'; eat() { console.log('吃'); } }

extends inherits the parent class

 // 猫class Cat extends Animal { run() { console.log('跑'); } } const cat = new Cat(); cat.run(); // 跑cat.eat(); // 吃console.log(cat.address); // 地球

Summary: class creates a class, extends inherits a class, and can use the properties and functions of the parent class.

1) What is a class component?

  • Components created using the class syntax are class components

2) Define class components

  • Convention: The first letter of the class name must be capitalized
  • Convention: Must inherit React.Component parent class
  • Convention: There must be a render function, which returns the UI structure, and can return null without rendering
 import { Component } from 'react'; class Header extends Component { render() { return <div>头部组件</div>; } }

3) Use class components

  • The class name is the component name, and using a component is to use the component name as a label.
 import { Component } from 'react'; import ReactDom from 'react-dom'; // 头部class Header extends Component { render() { return <div>头部组件</div>; } } // 根组件class App extends Component { render() { return ( <> <Header /> </> ); } } ReactDom.render(<App />, document.getElementById('root'));

Summarize

  • Use class to define classes, use extends to inherit React.Component to complete class component definition
  • 首字母大写. There must be a render function to return the UI structure. If there is no rendering, it can return null .
  • When using it, you can use the class name as a标签

Component extraction

If all components are written in one file, the code will be difficult to maintain later. As an independent entity, the components are generally placed in a separate JS file.

Extraction components

  • Define a js or jsx file to define the default export of components
  • You can use the component to import and use it as a label.

Specific operations:

1. Create a new src/components/Header.jsx class component, and create a new src/components/Footer.jsx function component

 import { Component } from 'react'; class Header extends Component { render() { return <div>头部组件</div>; } } export default Header;
 const Footer = () => { return <div>底部组件</div>; }; export default Footer;

2. Create a new src/App.jsx component and import the Header Footer component for use.

 import { Component } from 'react'; import Header from './components/Header.jsx'; import Footer from './components/Footer.jsx'; class App extends Component { render() { return ( <> <Header />内容<Footer /> </> ); } }

3. index.js uses App root component

 import ReactDom from 'react-dom'; import App from './App.jsx'; ReactDom.render(<App />, document.getElementById('root'));

Stateless and stateful components

Simple understanding:

Stateless (function) components, responsible for static structure display

A stateful (class) component responsible for updating the UI and making the page move

1. Stateless Components

  • The component itself does not define state, there is no component life cycle, and it is only responsible for UI rendering.
  • Function components before React16.8 are stateless components, and function components can also be stateful after Hooks appear.

2. Stateful Components

  • The component itself has independent data, has a component life cycle, and has interactive behaviors.
  • A class component can define its own state, has a component life cycle, and is a stateful component.

3. The difference between them

  • Stateless components have better performance because they do not maintain state and only render. Stateful components provide data and lifecycle, and are more capable.

4. How to choose

  • Before React16.8 , components did not need to maintain data and only used函数组件for rendering, and类组件were used for data and interaction. You need to judge and have a mental burden.
  • After React16.8 , Hooks appeared to provide status to functions. It is recommended to use function components.

Summarize

  • A component that has no state in itself is a stateless component, and a component that provides state itself is a stateful component.
  • Before 16.8, stateless components used function components and stateful components used class components. After 16.8, Unity can use function components.
  • React does not say that it completely replaces class components. There are still many class components in old projects. It is necessary for us to learn its specific usage.

Class Component – ​​defines the state

  • Define the state property to define the state of the component, which belongs to the component’s own data, and its value is an object.
  • When using state , you can access it through this , for example: this.state.xxx .
  • Data changes, driving view updates.
 import { Component } from 'react'; class App extends Component { // 状态state = { title: '数码产品', list: ['电脑', '手机', '相机'], }; render() { return ( <> <h3>{this.state.title}</h3> <ul> {this.state.list.map((item) => { return <li key={item}>{item}</li>; })} </ul> </> ); } } export default App;

Summarize:

  • Define the state property, the value is the object storage data, this.state.xxx uses the data, and the data drives the view update.

Class Components – Binding Events

  • Declare the event handler function in the class, and use the method of on+事件名称={处理函数} to bind the event on the label. The event name needs to follow大驼峰case rule.
  • The default parameter of the handler function is the event object, which can be used to handle default behavior and event bubbling.
 import { Component } from 'react'; class App extends Component { // 状态state = { count: 0, }; // 事件处理函数handleClick(e) { // 默认行为e.preventDefault(); // 事件冒泡e.stopPropagation(); console.log('handleClick'); } handleMouseEnter() { console.log('handleMouseEnter'); } render() { return ( <> <div onMouseEnter={this.handleMouseEnter}>计数器：{this.state.count} </div> <div> <a href="http://www.iyouhun.com" onClick={this.handleClick}>按钮</a> </div> </> ); } } export default App;

Summarize:

  • The way to bind events is the same as the native way, use on+事件名称={处理函数} to bind
  • The event name uses大驼峰case rule, for example: onClick onMouseEnter , the handler function defaults to the event object.

Event binding this points to

  • Print this.state.count in the event handler and find an error, this is undefined .
  • Demonstrate the impact of function calls on this pointing, and get that whoever calls this will execute the function.
  • Find out the reason: the handler function is not called through the component, resulting in this is not a component problem.

1. Found that this is undefined

 import { Component } from 'react'; class App extends Component { // 状态state = { count: 0, }; // 事件处理函数handleClick(e) { console.log(e); // Uncaught TypeError: Cannot read properties of undefined (reading 'state') console.log(this.state.count); } render() { return ( <> <div>计数器：{this.state.count}</div> <div> <button onClick={this.handleClick}>按钮</button> </div> </> ); } } export default App;

2. Demonstrate the effect of handler function calls on this

 const obj = { name: 'tom', say() { console.log(this); }, }; obj.say(); // 打印：{name: 'tom', say: function} const say = obj.say; say(); // 打印：window对象严格模式

3. The cause of the problem

  • The handler function declared by the class component is assigned to the on+事件名称attribute, and it is not called by the component when it is called.

Handle this pointing to the problem

  • Solve this problem by binding arrow functions
  • Solve this problem with bind
  • Solve this problem by declaring arrow functions

1. Solve this problem by binding arrow functions

 import { Component } from "react"; class App extends Component { // 状态state = { count: 0, }; // 事件处理函数handleClick(e) { console.log(e) console.log(this.state.count) } render() { return ( <> <div>计数器：{this.state.count}</div> <div> + <button onClick={(e)=>this.handleClick(e)}>按钮</button> </div> </> ); } } export default App;

2. Solve this problem by bind

 import { Component } from "react"; class App extends Component { // 状态state = { count: 0, }; // 事件处理函数handleClick(e) { console.log(e) console.log(this.state.count) } render() { return ( <> <div>计数器：{this.state.count}</div> <div> + <button onClick={this.handleClick.bind(this)}>按钮</button> </div> </> ); } } export default App;

3. Solve this problem by declaring arrow functions (recommended)

Take advantage of class instance methods in the form of arrow functions.

Note: This syntax is experimental, however, it can be used out of the box thanks to babel.

 import { Component } from "react"; class App extends Component { // 状态state = { count: 0, }; // 事件处理函数+ handleClick = (e) => { console.log(e) console.log(this.state.count) } render() { return ( <> <div>计数器：{this.state.count}</div> <div> <button onClick={this.handleClick}>按钮</button> </div> </> ); } } export default App;

Class Components – setState use

  • React class components provide a function setState({需修改数据}) , which can update data and views.
  • Modifying the data in the state directly will not update the view, demonstrating the correct way to modify simple data, arrays, and objects.

1. Modify the data to update the view through setState

 import { Component } from 'react'; class App extends Component { state = { count: 0, }; handleClick = () => { // 修改数据this.setState({ // key是要修改的数据名称，value是对应的新值count: this.state.count + 1, }); }; render() { return ( <> <div>计数器：{this.state.count}</div> <div> <button onClick={this.handleClick}>按钮</button> </div> </> ); } } export default App;

2. Modify the array and modify the correct pose of the object

 import { Component } from 'react'; class App extends Component { state = { count: 0, user: { name: 'jack', age: 18, }, list: ['电脑', '手机'], }; handleClick = () => { // 修改数据this.setState({ // key是要修改的数据名称，value是对应的新值count: this.state.count + 1, }); }; updateList = () => { // 修改列表this.setState({ list: [...this.state.list, '相机'], }); }; updateUser = () => { // 修改对象this.setState({ user: { ...this.state.user, name: 'tony', }, }); }; render() { return ( <> <div>计数器：{this.state.count}</div> <div> <button onClick={this.handleClick}>按钮</button> </div> <hr /> <div>商品：{this.state.list.join(',')}</div> <button onClick={this.updateList}>改数组</button> <hr /> <div>姓名：{this.state.user.name}，年龄：{this.state.user.age} </div> <button onClick={this.updateUser}>改对象</button> </> ); } } export default App;

Class Components – Controlled Components

1. What is a controlled component

  • The value of the form element is controlled by state in React, and the form element is the controlled component.

    2. How to bind form elements, such as: input:text input:checkbox

 import { Component } from 'react'; class App extends Component { state = { mobile: '13811112222', isAgree: true, }; changeMobile = (e) => { this.setState({ mobile: e.target.value, }); }; changeAgree = (e) => { this.setState({ isAgree: e.target.checked, }); }; render() { return ( <> <div> <input value={this.state.mobile} onChange={this.changeMobile} type="text" placeholder="请输入手机号" /> </div> <div> <input checked={this.state.isAgree} onChange={this.changeAgree} type="checkbox" />同意用户协议和隐私条款</div> </> ); } } export default App;

Summarize:

  • Use the state data to assign to the form native, and modify the state data through the onChange monitoring value change to complete the binding of the form elements.
  • Such form elements are called controlled components.

Class Components – Uncontrolled Components

1. What is an uncontrolled component?

  • A form element that is not controlled by state, it controls its own value, is an uncontrolled component

2. Get the value of the uncontrolled component by getting the form element by ref

 import { Component, createRef } from 'react'; class App extends Component { // 获取非受控组件的值// 1. 通过createRef创建一个ref对象// 2. 给元素绑定ref属性值为创建的ref对象// 3. 通过ref对象的current获取元素，再获取它的值mobileRef = createRef(); getMobile = () => { console.log(this.mobileRef.current.value); }; render() { return ( <> <div> {/* 没有被state控制的表单原生认为是非受控组件*/} <input ref={this.mobileRef} type="text" placeholder="请输入手机号" /> <button onClick={this.getMobile}>获取</button> </div> </> ); } } export default App;

Summarize:

  • The role of ref : get the DOM or component
  • With the help of ref , the form element value is obtained using the native DOM method.

Summarize

1. Two ways to create components: function components and class components

2. Stateless (function) components, responsible for static structure display

3. A stateful (class) component responsible for updating the UI and making the page move

4. Binding events Note that this points to the problem

5. It is recommended to use controlled components to handle forms

6. Create components fully using the capabilities of the JS language, which is the idea of ​​React

This article is reprinted from: https://www.iyouhun.com/post-223.html
This site is for inclusion only, and the copyright belongs to the original author.

Leave a Comment