首钢建设网站,好牌子商城网,wordpress 多域名,贵州省城乡建设部网站首页React的核心思想就是组件化#xff0c;相对于Vue来说#xff0c;React的组件化更加灵活和多样。主要可以分为两大类#xff1a;函数组件#xff0c;类组件#xff0c;这两大类组件的名称必须是大写字母开头
一、函数组件 函数组件通常是function进行定义的函数#xff0… React的核心思想就是组件化相对于Vue来说React的组件化更加灵活和多样。主要可以分为两大类函数组件类组件这两大类组件的名称必须是大写字母开头
一、函数组件 函数组件通常是function进行定义的函数这个函数会返回和类组件中render函数返回一样的内容 函数组件的特点
没有生命周期会被更新并挂载但是没有生命周期函数没有this组件实例没有内部状态state 函数组件的代码相对来说是简洁的专注于render且组件不需要实例化整体渲染得到了提升并且视图和数据解耦分离输出只取决于输入 因为没有state 只能通过props获取属性内容并实现组件的更新无生命周期 import React from reactexport default function App(){render(){return (divHello World!div/)}
}注意 当render被调用的时候会返回以下类型之一同时还会检查this.props,this.state React 元素数组或者Fragments 使render方法可以返回多个元素Portals 可以渲染子节点到不同的DOM子树上字符串或数值类型 在DOM中会被渲染为文本节点布尔类型 或者 null 什么都不渲染 二、类组件 类组件的定义有两点要求第一是需要继承自React.Component第二是必须实现render函数 定义类组件的步骤
constructor是可以选择的通常需要在这里初始化一些数据this.state中维护的就是我们组件内部的数据render方法是class组件中唯一必须实现的方法
// index.js
import React from react
import ReactDom from react-domimport App from App.jsReactDOM.render(App /,document.getElementById(root))// App.js
import React,{Component} from react
export default class App extends Component {render(){return(divHello Worlddiv/)}
}类组件特点
状态state是在constructor中初始化的成员函数不会自动绑定this需要手动绑定才能获得当前组件实例对象 手动绑定this的方法 可以在构造函数中完成绑定可以在调用的时候使用method.bind(this)完成绑定使用箭头函数绑定 state的变化会影响组件的渲染因此不能把所有的变量都放到state中不然会造成一定的性能损失下面情况都不应该作为一个状态放到state中
通过props获取该变量不在render中使用整个过程不会发生改变变量可以通过props和 state两者计算得出
