区分HTML DOM 和虚拟DOM
HTML DOM | 虚拟DOM |
---|---|
更新缓慢 | 更新更快 |
可以直接更新 HTML | 无法直接更新 HTML |
如果元素更新,则创建新DOM | 如果元素更新,则更新 JSX |
DOM操作代价很高 | DOM 操作非常简单 |
消耗的内存较多 | 很少的内存消耗 |
React创建组件
方式1:使用function来创建组件
//组件首字符必须大写 function Foo(){ //空组件 return null return <div>Foo</div> }
为组件传递数据
function Foo(props){ //props为只读无法在组件中进行赋值 //props.age = 1 错误 return <div>Foo----{props.name}----{props.age}</div> } const example={ name:"react", age:2 } //设定属性默认值 Foo.defaultProps = { name:"ww", age:18 } <Foo name={example.name} age={example.age}/> //es6 拓展运算符写法 <Foo {...example}/>
将组件暴露
function Foo(props){ //props为只读无法在组件中进行赋值 return <div>Foo----{props.name}----{props.age}</div> } export default Foo
方式2 使用class关键字创建
import React from 'react'
export default class componentName extend React.Component { construct(){ super() this.state={ } } //在组件内部必须有 render 函数 render(){ //render 函数中,必须返回合法的JSX虚拟DOM结构 //在class关键字创建的组件中,如果想使用外界传递过来的props参数,不需接收,直接使用this.props.***访问即可 return( <div> <div>{this.state.***}</div> <div>{this.props.***}</div> </div> ) } }
两种创建组件方式对比
注意:使用class关键字创建的组件,有自己的私有数据和生命周期函数;
注意:但是使用function创建的组件,只有props,没有自己的私有数据和生命周期函数;
1.使用构造函数创建出来的组件叫:“无状态组件”;
2.使用class关键字创建出来的组件叫:“有状态组件”;
有状态组件和无状态组件的区别就是:有无state属性和有无生命周期函数;
有状态组件 | 无状态组件 |
---|---|
在内存中存储有关组件状态变化的信息 | 计算组件的内部的状态 |
有权改变状态 | 无权改变状态 |
包含过去、现在和未来可能的状态变化情况 | 不包含过去,现在和未来可能发生的状态变化情况 |
接受无状态组件状态变化要求的通知,然后将 props 发送给他们。 | 从有状态组件接收 props 并将其视为回调函数。 |
组件中props
和state
之间的区别
-
props
中的数据都是外界传进来的; -
state
中的数据都是组件私有的; -
props
中的数据都是只读的,不能重新赋值; -
state
中的数据都是可读可写的;