网站定制网页设计,怎么做卡蜜网站,短视频平台开发,越秀网站建设哪家好使用 function 构造函数创建组件#xff1a; 如果想要把组件放到页面中#xff0c;可以把构造函数的名称#xff0c;当作 组件的名称#xff0c;以 HTML标签形式引入页面中#xff0c; 因为在React中#xff0c;构造函数就是一个最基本的组件。 注意#xff1a; 组件的首…使用 function 构造函数创建组件 如果想要把组件放到页面中可以把构造函数的名称当作 组件的名称以 HTML标签形式引入页面中 因为在React中构造函数就是一个最基本的组件。 注意 组件的首字母必须是大写 因为React在解析所有的标签的时候是以标签的首字母来区分的如果标签的首字母是小写那么就按照 普通的 HTML 标签来解析如果首字母是大写则按照组件的形式去解析渲染。 格式 创建 function Hello(props) {// 在组件中如果想要使用外部传递过来的数据必须显示的在 构造函数参数列表中定义 props 属性来接收// 通过 props 得到的任何数据都是只读的不能从新赋值// props.name 000。无效return divh1这是在Hello组件中定义的元素 --- {props.name}/h1/div} 使用 ReactDOM.render(div{
/* Hello name{person.name} age{person.age} gender{person.gender} address{person.address}/Hello *//* 上面的方法太麻烦下面使用ES6中的属性扩散‘...’ */}Hello {...person}/Hello/div, document.getElementById(app))// 这里 ...Obj 语法是 ES6中的属性扩散 表示把这个对象上的所有属性展开了放到这个位置 使用 class 关键字创建组件 class Person extends React.Component{render(){
// 在render函数中必须返回一个null或者符合规范的虚拟DOM元素
return divh1这是用 class 关键字创建的组件/h1/div;
}
}区别 使用 function 构造函数创建的组件内部没有 state 私有数据只有 一个 props 来接收外界传递过来的数据所以 叫做【无状态组件】 使用 class 关键字 创建的组件内部除了有 this.props 这个只读属性之外还有一个 专门用于 存放自己私有数据的 this.state 属性这个 state 是可读可写的 所以叫做【有状态组件】 有状态组件和无状态组件最本质的区别就是有无 state 属性同时 class 创建的组件有自己的生命周期函数但是function 创建的 组件没有自己的生命周期函数使用场景 1. 如果一个组件需要存放自己的私有数据或者需要在组件的不同阶段执行不同的业务逻辑此时非常适合用 class 创建出来的有状态组件2. 如果一个组件只需要根据外界传递过来的 props渲染固定的 页面结构就完事儿了此时非常适合使用 function 创建出来的 无状态组件使用无状态组件的好处就是运行速度会快一点 转载于:https://www.cnblogs.com/ll15888/p/11168969.html
