React类组件和函数组件

发布于：2022-04-10 12:59:27  栏目：技术文档

关于命名，组件第一个字母大写，元素小写，

类组件和函数组件

• 元素与组件const div=React.createElement(‘div’,…)这是一个React元素(d要小写)const Div=()=>React.createElement(‘div’,…)这是一个React组件（D大写）
• 什么是组件能和其他物件组合起来的物件，就是组件组件并没有明确的意义，就目前而言，一个返回React元素的函数就是一个组件在Vue里面一个构造选项就是一个组件
• React函数组件function Welcome(props){retuen <h1> hello{props.name}</h1>}使用方法 < Welcome name=’Tom’ />
• 类组件class Welcome extends React.Component{render(){return <h1> hello{this.props.name}</h1>}}使用方法 < Welcome name=’Tom’ />
• Welcome会被bable翻译成什么<div />会被翻译成React.createElement(‘div’)<Wlecome />会被翻译成React.createElement(Wlecome)
• React.createElement的逻辑如果传入一个字符串’div’会创建一个div如果传入一个函数，会调用该函数，获取返回值如果传入的是一个类，则在类前面加new，获取一个组件对象，然后调用组件的runder方法，获取返回值。
• 两种组件的例子https://codesandbox.io/s/exciting-meninsky-9foduf

  如何使用state和props

  如何绑定事件

相关推荐