react之创建组建并使用props
React 创建 Props 组建 使用
2023-09-14 09:06:35 时间
import React from "react"
import ReactDOM from "react-dom"
import './index.css'
import * as serviceWorker from './serviceWorker'
import Hello from "./components/Hello"
const user = {
name: "liming",
age: 23,
gender: "男"
}
class Hello2 extends React.Component {
//render实例方法 主要用来渲染组建
render() {
//在class里创建组建,直接通过this.props访问即可
return <div>这里是{this.props.name}</div>
}
}
//使用...展开运算符将数组和对象展开。
ReactDOM.render(
<div>
<Hello {...user}>
</Hello>
<hr/>
<Hello2 {...user}></Hello2>
</div>
,
document.getElementById("root"))
serviceWorker.unregister();
除了class创建组建外我们还可以通过下面的方式
文件src/components/Hello.jsx
// 第一种创建组建的方式 一个普通的构造函数就是一个组建。
// 组建的首字母必须大写
import React from "react";
//创建并导出组建 第一种方法
export default function Hello(props) {
//如果组建中return null,表示该组建不渲染。
//props是只读的 后面使用state解决改值的问题。
return <div>
你好,我是{props.name}
,性别{props.gender}
,今年{props.age}岁
</div>
}
//把组建暴露出去
//export default Hello
那么到底使用哪种方式?
我们把通过function关键字创造构造函数创建出来的组件称之为“无状态组件”。
把使用class方式创建的组建称之为 “有状态组件"。
什么区别?
function创建的组件只有props属性,没有自己的私有数据和生命周期函数。
class 都有。
什么时候选用?
如果不使用this.state属性,也就是不需要更新页面的值,那么这个时候就可以使用无状态组件的创建方式了。因为无状态组件没有私有数据(this.state)和生命周期函数所以的话运行效率会高一些
相关文章
- [Web 前端] 如何构建React+Mobx+Superagent的完整框架
- [React] Use a lazy initializer with useState
- [React Recoil] Use selectors to calculate derived data based on state stored within a Recoil atom
- [React] useMemo and React.memo
- [React] Scaffold a React application with pnpm and vite
- [React Intl] Use a react-intl Higher Order Component to format messages
- React中onClick绑定后的工作原理
- react创建组件值state
- react实现多行文本超出加省略号
- 【视频】React redux toolkit创建状态切片