react创建脚手架以及定义组件的方式

一、搭建脚手架（准备条件）

node -v 需要16以上版本
npm -v 需要6以上版本
npm i -g create-react-app
create-react-app helo-react

ps: 关于虚拟DOM

本质是Object类型的对象(一般对象)
虚拟Dom比较“轻”，真实Dom比较“重”。因为虚拟Dom是React内部在用，无需真实Dom上那么多的属性。

二、定义组件的三种方式

1. 定义函数式组件（无状态组件）

创建无状态函数式组件形式是从React 0.14版本开始出现的。它是为了创建纯展示组件，这种组件只负责根据传入的props来展示，不涉及到要state状态的操作。

import React from 'react'
import ReactDOM from 'react-dom'
/*
const 组件名(首字母大写)=（props）=>{
	return jsx表达式             
}
*/
const App = (props) => {
    return (
    	<h1>欢迎进入{props.name}的世界</h1>
    )
}

ReactDOM.render(
  // React组件的调用方式
  <App name={"react"} />,
  document.getElementById('root')
)

在这里插入图片描述

2. es5方式React.createClass组件 (最早出来的，目前基本不用)

语法


React.createClass({
  getInitialState(){ //定义组件初始化状态
      
  },
  getDefaultProps(){ //定义组件的默认属性
      
  },
  render () {
    return (
      <div>hello world</div>
  	)
  }
})

3. es6方式extends React.Component

复习类知识：
在这里插入图片描述

ES6的加入让JavaScript直接支持使用class来定义一个类，react的第二种创建组件的方式就是使用的类的继承ES6 class是目前官方推荐的使用方式，它使用了ES6标准语法来构建，看以下代码：

import React from 'react'
import ReactDOM from 'react-dom'

/*
class 组件名  extends  React.Component {
	render(){ //render是必不可少的钩子函数
		return jsx表达式
	}
}
*/

class App extends React.Component {
  render () {
    return (
      // 注意这里得用this.props.name, 必须用this.props
      <h1>欢迎进入{this.props.name}的世界</h1>
  	)
  }
}
ReactDOM.render(
  <App name="react" />,
  document.getElementById('root')
)

在这里插入图片描述

三、三种方式的区别及特点

1.无状态函数式组件

组件不会被实例化，整体渲染性能得到提升
因为组件被精简成一个render方法的函数来实现的，由于是无状态组件，所以无状态组件就不会在有组件实例化的过程，无实例化过程也就不需要分配多余的内存，从而性能得到一定的提升。
组件不能访问this对象
无状态组件由于没有实例化过程，所以无法访问组件this中的对象，例如：this.ref、this.state等均不能访问。若想访问就不能使用这种形式来创建组件
组件无法访问生命周期的方法
因为无状态组件是不需要组件生命周期管理和状态管理，所以底层实现这种形式的组件时是不会实现组件的生命周期方法。所以无状态组件是不能参与组件的各个生命周期管理的。
无状态组件只能访问输入的props，同样的props会得到同样的渲染结果，不会有副作用

2.es5方式React.createClass组件

与无状态组件相比，React.createClass和后面要描述的React.Component都是创建有状态的组件，这些组件是要被实例化的，并且可以访问组件的生命周期方法。但是随着React的发展，React.createClass形式自身的问题暴露出来：

React.createClass会自绑定函数方法（不像React.Component只绑定需要关心的函数）导致不必要的性能开销，增加代码过时的可能性。
React.createClass的mixins不够自然、直观；React.Component形式非常适合高阶组件（Higher Order Components–HOC）,它以更直观的形式展示了比mixins更强大的功能，并且HOC是纯净的JavaScript，不用担心他们会被废弃。HOC可以参考《无状态组件(Stateless Component) 与高阶组件》。