React学习4(React组件)

组件概念

组件 & Props

组件允许你将 UI 拆分为独立可复用的代码片段，并对每个片段进行独立构思。
组件，从概念上类似于 JavaScript 函数。它接受任意的入参（即 “props”），并返回用于描述页面展示内容的 React 元素。

组件并不是真实的DOM节点,而是存在于内存之中的一个数组结构,叫做虚拟DOM(virtual DOM),只有当它插入文档之后,才会变成真实的DOM
根据react的设计,所有的DOM变动,都先在虚拟DOM上发生,然后再将实际发生变动的部分,反应在真实DOM上,这种算法叫diff算法,能极大地提升网页的性能表现.

函数组件与 class 组件

组件分为两类分别是函数组件和class组件

• 定义组件最简单的方式就是编写 JavaScript 函数：

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

该函数是一个有效的 React 组件，因为它接收唯一带有数据的 “props”（代表属性）对象与并返回一个 React 元素。这类组件被称为“函数组件”，因为它本质上就是 JavaScript 函数。

• 同时还可以使用 ES6 的 class 来定义组件：

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

组件分类

react组件可以分为函数组件和class组件. 两种组件都可以达到相同的效果,但是实现方式不同, class组件相对于函数组件来说过于臃肿,更推荐函数组件 + hook开发.

函数组件相对简单一些,就是通过普通的js函数来进行封装组件.

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

该函数是一个有效的 React 组件，因为它接收唯一带有数据的 “props”（代表属性）对象与并返回一个 React 元素。这类组件被称为“函数组件”，因为它本质上就是 JavaScript 函数。

同时还可以使用 ES6 的 class 来定义组件

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

渲染组件

之前的react元素都是dom标签,react元素也可以是自定义的组件.
当 React 元素为用户自定义组件时，它会将 JSX 所接收的属性（attributes）以及子组件（children）转换为单个对象传递给组件，这个对象被称之为 “props”。在子组件中就可以从props来取外界传入的数据.

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}
const root = ReactDOM.createRoot(document.getElementById('root'));
const element = <Welcome name="react" />;
root.render(element); 

以上示例的渲染过程

• 1. 调用 root.render() 函数，并传入 <Welcome name="react" /> 作为参数。
• 2. React 调用 Welcome 组件，并将 {name: ‘react’} 作为 props 传入。
• 3. Welcome 组件将 <h1>Hello, react</h1> 元素作为返回值。
• 4. React DOM 将 DOM 高效地更新为 <h1>Hello, Sara</h1>。

注意： 组件名称必须以大写字母开头。
React 会将以小写字母开头的组件视为原生 DOM 标签。例如，<div /> 代表 HTML 的 div 标签，而 <Welcome /> 则代表一个组件，并且需在作用域内使用 Welcome。

组合组件

组件可以在其输出中引用其他组件。这就可以让我们用同一组件来抽象出任意层次的细节。按钮，表单，对话框，甚至整个屏幕的内容：在 React 应用程序中，这些通常都会以组件的形式表示。

例如，我们可以创建一个可以多次渲染 Welcome 组件的 App 组件：

function Welcome(props) {  
  return <h1>Hello, {props.name}</h1>;
}
function App() {
  return (
    <div>
      <Welcome name="vue" />
      <Welcome name="react" />
    </div>
  );
}

组件抽离

如果所有的组件都写在一起,不容易维护, 定义js或者jsx 定义组件默认导出,使用组件导入即可.

操作:

• 1.新建 src/components/Header.jsx 函数组件

  const Header = () => {
    return <div>头部组件</div>;
  };
  export default Header ;
  

• 2.新建 src/App.jsx 组件, 导入Header 组件使用。

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

• index.js 使用 App 根组件

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