React 组件使用

基本介绍

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

• 相关约定

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

• 在react 中，组件的形式有2种：

- 类组件（面向对象）
	1. 有状态（又称之为有状态组件）
	2. 有生命周期
	3. 其实就是一个构造器,每次使用组件都相当于在实例化组件
- 函数组件（面向过程）
	1. 无状态（又称之为无状态组件）
	2. 无生命周期
	3. 直接调用

• 受控组件与非受控组件

React组件的数据渲染是否被调用者传递的props完全控制，控制则为受控组件，否则非受控组件。

组件创建

在 react17 之后，允许在项目不用 “import React from “react”; ”，但是在之前的版本是不行的。建议写，肯定不会错。

类组件

• 注意点：

1. 使用ES6语法的class创建组件
2. class的名字必须首字母大写
3. class需要继承Component类（来自React）
4. class组件必须要有 redner() 方法， 用于页面结构渲染， redner() 方法必须使用return返回值，返回值要符合JSX语法
5. class最终需要被导出（export default）

• 第一种写法：

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

• 第二种写法：

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

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

// 导出
export default App;

• 在16以前的版本还支持这样创建组件, 但现在的项目基本上不用

React.createClass({
     
  render () {
     
    return (
      <div>{
     this.props.xxx}</div>
  	)
  }
})

函数组件

• 注意点：

1. 函数组件的主体是一个函数，支持function形式和箭头函数等
2. 函数名称必须首字母大写
3. 函数组件必须使用return返回值，返回值要符号JSX语法
4. 函数组件必须要导出函数元素（export default）

import React from "react"
// 函数名首字母必须大写
const FunCmp = () => {
     
    return <div>这是一个函数组件</div>;
};

// 导出
export default FunCmp;

组件传值

在使用一个组件的时候，可以把参数放在标签的属性当中，所有的属性都会作为 组件 props 对象的键值。通过箭头函数创建的组件，需要通过函数的参数来接收 props

• 组件间传值，在 Reac t中时通过只读属性 props 来完成数据传递的
• props：接收任意的传参，并返回用于描述页面展示内容的 React 元素

类组件

• 注意点：

1. 必须具备父子关系
2. 通过props进行传递
3. 支持写死数据""和可变数据{
     }传递
4. 不要接收props形参，直接用“this.props”即可
5. 在父子关系中，类组件和函数组件可以混用，使用的方式根据当前组件决定

• 子组件ClassCmpErZi.jsx

import React, {
      Component } from "react";

class ClassCmpErZi extends Component {
     
    render() {
     
        return (
            <div>
                山重水复疑无路，{
     this.props.next}。{
     this.props.name}
            </div>
        );
    }
}

export default ClassCmpErZi;

• 父组件ClassCmpBaBa.jsx

import React, {
      Component } from "react";
// 导入erzi组件
import ErZi from "./ClassCmpErZi";
class ClassCmpBaBa extends Component {
     
    // 声明可变数据
    next = "柳暗花明又一村";
    render() {
     
        return (
            <div>
                {
     /* 使用儿子组件 */}
                <ErZi next={
     this.next} name="陆游"></ErZi>
            </div>
        );
    }
}

export default ClassCmpBaBa;

函数组件

• 注意点：

1. 必须具备父子关系
2. 通过props进行传递
3. 支持写死数据""和可变数据{
     }传递
4. 传递过去后，子组件就有props属性了，数据都在props属性对象中
5. 要使用props，必须要通过函数形参接收props，否则props没定义

• 子组件FunCmpErZi.jsx

import React from "react";

const FunCmpErZi = (props) => {
     
    return <div>我劝天公重抖擞，{
     props.next}。{
     props.name}</div>;
};

export default FunCmpErZi;

• 父组件FunCmpBaBa.jsx

import React from "react";
// 导入ErZi组件
import ErZi from "./FunCmpErZi";

const FunCmpBaBa = () => {
     
    // 声明数据
    var next = "不拘一格降人才";
    return (
        <div>
            {
     /* 使用儿子组件 */}
            <ErZi next={
     next} name="龚自珍"></ErZi>
        </div>
    );
};

export default FunCmpBaBa;

组件关系

• 将一个组件渲染到某一个节点里的时候，会将这个节点里原有内容覆盖
• 组件嵌套的方式就是将子组件写入到父组件的模板中去，且react没有Vue中的内容分发机制（slot），所以我们在一个组件的模板中只能看到父子关系

组件的组合

// 从 react 的包当中引入了 React 和 React.js 的组件父类 Component
import React,{
     Component} from 'react'
import ReactDOM from 'react-dom'
// 定义子组件
class Title extends Component{
     
	render(){
     
		return (
			<h1>欢迎进入React的世界</h1>
		)
	}
}
class Content extends Component{
     
	render(){
     
		return (
			<p>React.js是一个构建UI的库</p>
		)
	}
}
// 定义父组件，在父组件里面调用子组件
class App extends Component{
     
	render (){
     
		return ( //注意：根节点一定是一个标签
			<div>	
    			<Title /> <Content />
      		</div>
		)
	}
}
/*
由于每个React组件只能有一个根节点，所以要渲染多个组件的时候，需要在最外层包一个容器，如果使用div, 会生成多余的一层dom
*/
ReactDOM.render(
	<App/>,
	document.getElementById('root')
)

• 如果不想生成多余的一层dom可以使用React提供的Fragment组件在最外层进行包裹

// 从 react 的包当中引入了 React 和 React.js 的组件父类 Component
// 还引入了一个React.js里的一种特殊的组件 Fragment
import React,{
     Component, Fragment} from 'react'
import ReactDOM from 'react-dom'
// 定义子组件
class Title extends Component{
     
	render(){
     
		return (
			<h1>欢迎进入React的世界</h1>
		)
	}
}
class Content extends Component{
     
	render(){
     
		return (
			<p>React.js是一个构建UI的库</p>
		)
	}
}
// 定义父组件，在父组件里面调用子组件
class App extends Component{
     
	render (){
     
		return (//注意：根节点一定是一个标签
			<Fragment>{
     /*在根节点不想生成多一级的标签  使用 Fragment*/}
    			<Title /> <Content />
      		</Fragment>
		)
	}
}
/*
Fragment 简写方式 <>
上面代码可以简写成：<>