react的各种组件，详细介绍组件的用法和区别,让你正确在react的项目中会组件,看一下就明白

本文链接：https://blog.csdn.net/weixin_43353869/article/details/107260988

react的组件有一下几种

1.类组件 class User extends React.Component{} 面向对象的组件

es6创建的组件
class User extends React.Component{
    constructor(props) {  //  constructor 是一种用于创建和初始化class创建的对象的特殊方法。
    super(props)          //  在一个构造方法中可以使用super关键字来调用一个父类的构造方法。继承父级的props 
    // state状态
    this.state = {
      msg: '我是类组件'
    }
  }
 // render是一个钩子函数渲染数据
这个 render 方法必须要返回一个 JSX 元素。
必须要用一个外层的 JSX 元素把所有内容包裹起来,返回并列多个 JSX 元素是不合法的.
 render() {
 // return返回的是
    return (
      <div>
        这个 render 方法必须要返回一个 JSX 元素。
       必须要用一个外层的 JSX 元素把所有内容包裹起来,返回并列多个 JSX 元素是不合法的.
        <h3>{this.msg}</h3>
      </div>
    )
  }
}

2.无状态组件(函数组件)

没有state和this 父自定义属性,子组件用props来接收

// 无状态组件 第一种状态组件函数的写法,
function Child(props){
    return (
        <div>
            <h1>无状态组件</h1>
        </div>
    )
}

3.ES5组件 React.createElement()

React.createElement，接受三个参数，代表节点类型的字符串type, 代表节点属性的对象props,代表节点内容 children。

4.高阶组件(高阶函数) function Hoc(child){}

window.setInterval("getmessage()",3000);
     
function getmessage(){
	window.alert("111111");
}

有点像Vue的Mixin（对象混入），封装公共模块。不过React并不提倡这种做法，所以引入了一种新的概念叫高阶组件（HOC）：

高阶组件本质上是一个函数，只是这种组件（函数）接收一个组件，返回一个新的组件。

高阶函数：接受的参数是函数或者返回值是函数
如数组遍历相关的（map，ruduce），定时器，Promise，高阶组件也是高阶函数
高阶函数的作用就是实现一个更加强大动态的功能

高阶组件的作用就是实现组件复用，节省内存

  
// 组件一般都要引入react
import React,{ Component } from 'react';

const Hoc = ( Comp ) =>{//参数首字母必须大写，必须要有返回值，在下面使用
    return class banner extends Component{ //类名可以省略，省略的话标签名就是以temp或者其他的代替，必须要有返回值
        banner = () => {//这里是实现某个功能的函数代码
            return 'banner'
        }
        render () {
            return (
                <Comp banner = { this.banner }></Comp>//将参数当做一个组件返回出去
            )
        }
    }
}
class A extends Component{
    render () {
        return (
            <div>
                <p> A组件 </p>
                { this.props.banner() }//在下面使用了高阶组件后，这里就可以直接使用里面的方法了
            </div>
        )
    }
}

class B extends Component{
    render () {
        return (
            <div>
                <p> B组件 </p>
                { this.props.banner() }
            </div>
        )
    }
}

const HocA = Hoc(A)//组件名必须首字母大写，将组件名当参数传进去，这样这个组件就有高阶组件内的方法了
const HocB = Hoc(B)// 把组件当成参数,传过去
 
// 组件C继承,复用组件A和组件B
class C extends Component{
    render () {
        return (
            <div>
                <p> C组件 </p>
                <HocA></HocA>//这里使用的高阶组件
                <HocB></HocB>
            </div>
        )
    }
}
// 暴露组件C
export default C

5.hooks组件

Hooks 的种类
React Hooks 分为内置的和自定义的两种类型，内置的 hooks 有以下几个：

useState
useEffect
useContext
useReducer
useCallback

父子组件

import React, { useState } from 'react';
import ReactDOM from 'react-dom';

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <button onClick={() => setCount(count + 1)}>+</button>
      <h1>{count}</h1>
      <button onClick={() => setCount(count - 1)}>-</button>
    </div>
  )
}

ReactDOM.render(<Counter />, document.getElementById('root'));

子组件

import React , { useContext ,useState } from 'react';
import  { NumContext } from './fu'
function Zi(  ){
    // 使用上下文，通过解构赋值，使用 num 和 setNum
    let {num ,setNum } = useContext(NumContext);
 
    return (
        <div>
            子组件数值{num}
            <button onClick={()=>{
                setNum(num+1) 
              }}>  
                子组件点击增加数值
            </button>
 
        </div>
    )
}
export default Zi;

hooks的用方:React Hooks中父组件中调用子组件方法

组件的总结

类组件没有无状态的组件的性能高,无状态组件可以用hooks，使它有类组件一些用方,比如是

hook是在react16.5出现

Hooks 它是一组函数api

自定义hooks

hooks有下面的钩子

useState 相当于state let [ count,setCount ] =useState(20)

function countChange (){

setCount(count+1)

}

useEffect :(副作用)开启长连接,dom的操作。定时器调接口

相当于三个生命周期 componentDidMount (Mounted) componentDidUpdated (Updated) componentWilldDestory(Destory) 可以做dom的

useContent

useRef

自定义hooks

Hooks 让函数组件,可以拥有state,声明周期的特性上下文

hooks提供api，解决问题

额外总结 ReactDOM.render、jsx、React.createElement

1.ReactDOM.render，接受三个参数，按顺序分别是，节点元素参数element，父节点DOM元素container, 一个回调函数callback。
2.React.createElement，接受三个参数，代表节点类型的字符串type, 代表节点属性的对象props,代表节点内容 children。
3.jsx、React.createElement，返回的都是一个对象，包含了dom的相关信息，也是ReactDOM.render接受的第一个元素参数。