类组件、函数组件
元素和组件
const div = React.createElement('div',...)
这是一个react元素。
const Div = ( ) => React.createElement('div',...)
这是一个react组件。
组件大写是约定俗成，不是规定 。
组件：
能跟其他物件组合的物件就是组件，他没有明确的定义，靠感觉理解即可。
目前来说，一个返回react元素的函数就是组件。
Vue中，一个构造选项就可以表示一个组件。
react的两种组件：
- 函数组件
function Welcome(props){
return <h1>Hello, {props.name}</h1>;
}
使用方法：<Welcome name = "xxx" />
- 类组件
class Welcome extends React.Component {
constractor(){
super()
this.state={n:0}
}
render(){
return <h1>Hello,{this.props.name}</h1>
}
}
使用方法：<Welcome name = "xxx" />
上面提到的会被翻译为什么？
-
会被翻译为`React.createElement('div')`
- 会被翻译为
React.createElement(Welcome)可以使用babel online在线翻译查看。
React.createElement的逻辑
- 如果传入一个字符串'div'，则创建一个div。
- 如果传入一个函数，则会调用该函数并获取其返回值。
- 如果传入一个类，则在类前面加一个new（这会执行constructor），获取一个组件对象，然后调用对象的render方法，获取其返回值。
类组件和函数组件使用props（外部数据）
-
类组件直接读取属性：`this.props.xxx'。
-
函数组件直接读取参数：`props.xxx'。
类组件和函数组件使用state（内部数据）
- 类组件用
this.state读，this.setState写。最好使用setState()函数，举个例子：
this.setState({n : this.state.n+1});
//上面是普通写法
this.setState((state)=>{
return{n: state.n+1
});
//上面是使用函数的写法，好处是不容易混淆新数据和旧数据
- 函数组件用
useState返回数组，第一项读，第二项写，且这个数组只有两项。
注意：类组件的setState会合并（但是只合并第一层的属性，想达到更深层合并，可以使用Object.assign或者...操作符），函数组件的setState不会自动合并，要合并就用...操作符吧。
