三、react组件

一、组件的概念

1、组件允许我们将UI拆分为独立可复用的代码片段，并对每个片段进行独立构思。

2、从概念上类似于JavaScript函数，它接受任意的入参（props），并返回用于描述页面展示内容的React元素（JSX）

二、组件的创建方式

1、函数组件

• 函数组件的特点
  • 函数组件（无状态组件）：使用JS的函数创建的组件
  • 函数名称以大写字母开头（建议）
  • 函数组件必须有返回值，表示该组件的结构（虚拟DOM），且内容必须有顶级元素

例如（使用脚手架创建项目）：

• 新建组件src/App.jsx：
  • 组件后缀可以是.js也可以是.jsx
    
  • 为了方便区分组件与项目的业务代码，建议组件用.jsx，业务代码后缀用.js

// 引入React的作用：通过babel将jsx编译成普通js代码会用到React.createElement，所以需要React
import React from 'react'

// 函数名首字母必须大写
function App() {
  return (
    <div>这是第一个函数组件</div>
  )
}

export default App;

• 创建项目入口文件src/index.js，查看输出结果

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

import App from "./App";

ReactDOM.render(<App></App>, document.getElementById("root"));

注意：在public/index.html文件中设置挂载点<div id="root"></div>

2、类组件

类组件的特点：

• 使用ES6语法的class创建的组件（有状态组件）
• 类名称为大写字母开头（建议）
• 类组件要继承React.Component父类，从而可以使用父类中提供的方法或者属性
• 类组件必须提供render方法，用于页面结构渲染，结构必须要有顶级元素，且必须return去返回

import React from "react";

// 创建class类，继承React.Component
// 在里面提供render方法，在return里面返回内容
class App extends React.Component {
  render() {
    return <div>这是第一个类组件</div>;
  }
}

export default App;

除了上述的写法以外，还可以对React.Component进行按需导入

// 引入react和Component
import React, { Component } from "react";

// 类组件
class App extends Component {
  render() {
    return <div>这是第一个类组件</div>;
  }
}

// 导出
export default App;

三、组件传值-props

在React中是通过只读属性props来完成数据传递的

props：接受任意的入参，并返回用于描述页面展示内容的React元素

1、函数组件传值

父组件以自定义属性的形式向子组件传值

子组件以函数形参的形式接收

1、父组件给子组件传递name和next值

import React from "react";

import Item from "./Components/Item";

class App extends React.Component {
  render() {
    return <Item name="林则徐" next="壁立千仞无欲则刚"></Item>;
  }
}

export default App;

2、子组件接收

import React from "react";

const Item = (props) => {
  return (
    <div>
      {props.name}：海纳百川有容乃大，{props.next}。
    </div>
  );
};

export default Item;

2、类组件传值

父组件中通过自定义属性向子组件传值

子级类组件中通过this.props属性来获取传递到子组件的值