react的各种组件，详细介绍组件的用法和区别,让你正确在react的项目中会组件,看一下就明白 |
您所在的位置：网站首页 › react中ref的两种用法和区别 › react的各种组件，详细介绍组件的用法和区别,让你正确在react的项目中会组件,看一下就明白 |
|
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 ( 这个 render 方法必须要返回一个 JSX 元素。 必须要用一个外层的 JSX 元素把所有内容包裹起来,返回并列多个 JSX 元素是不合法的. {this.msg} ) } }
2.无状态组件(函数组件) 没有state和this 父自定义属性,子组件用props来接收 // 无状态组件 第一种状态组件函数的写法, function Child(props){ return ( 无状态组件 ) } 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 ( //将参数当做一个组件返回出去 ) } } } class A extends Component{ render () { return (A组件 { this.props.banner() }//在下面使用了高阶组件后，这里就可以直接使用里面的方法了 ) } } class B extends Component{ render () { return (B组件 { this.props.banner() } ) } } const HocA = Hoc(A)//组件名必须首字母大写，将组件名当参数传进去，这样这个组件就有高阶组件内的方法了 const HocB = Hoc(B)// 把组件当成参数,传过去 // 组件C继承,复用组件A和组件B class C extends Component{ render () { return (C组件 //这里使用的高阶组件 ) } } // 暴露组件C export default C5.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 ( setCount(count + 1)}>+ {count} setCount(count - 1)}>- ) } ReactDOM.render(, document.getElementById('root')); 子组件 import React , { useContext ,useState } from 'react'; import { NumContext } from './fu' function Zi( ){ // 使用上下文，通过解构赋值，使用 num 和 setNum let {num ,setNum } = useContext(NumContext); return ( 子组件数值{num} { setNum(num+1) }}> 子组件点击增加数值 ) } 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接受的第一个元素参数。
|
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |