区分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中的数据都是可读可写的；