react 创建组件的两种方式

创建一个组件可以通过两种方式
**

第一种： ‘通过构造函数创建一个组件’

第一步：‘创建组件的文件必须引用react’,并且必须写成下面这行代码

import React from 'react';

第二步：‘导入组件的css样式’

//引入组件的css
import './App.css';

第三步：创建一个构造函数，函数必须有返回值，通常情况下，这里面只能是html文件的内容，并且只能有一个根目录
注意构造函数的首字母和组件的首字母必须大写
构造函数的名字就是组件的名字

function App(props) {return (<div className="App">{props.name}</div>);
}

第四步：抛出创建好的组件
export default App

第五步：在src文件中的index.js或者全局js文件中接收

import App from './App';

第六步：通过reactDOM.render方法，以标签的形式渲染

ReactDOM.render(<div> <App name='dx'></App></div>,
document.getElementById('root'),
function(){console.log('渲染完成了')
});

在index.js文件中的App标签中，通过绑定name属性给App组件传参
在App组件所在的文件中，通过使用构造函数的形参props接收所有的父组件传过来的形参，然后props.name就可以使用父组件传过来的参数了

第二种创建组件的方法

通过es6中的class类来创建组件

class 组件名称首字母大写  extends React.Component {render () {return <div> 1111</div>}
}

React.Component 是react构造好的一个父类，这个父类里面有创建组件的一些必备属性，被继承过来之后，自然就能用来创建组件

构造的组件内部必须有一个render函数，用以渲染当前组件虚拟的demo结构，在render函数中，必须通过return返回一个虚拟demo结构，和并且虚拟demo只能有一个demo结构

创建一个独立文件的组件

import React from 'react'
class Dx extends React.Component {render () {return <div>name: {this.props.name} age: {this.props.age}</div>}
}
export default Dx

在index.js文件中导入，并且以标签的形式渲染到页面中去

import Dx from './components/class.js'
ReactDOM.render(<div> <Dx name='dx' age='18'></Dx></div>,
document.getElementById('root'),
function(){console.log('渲染完成了')
});

在index.js文件的DX标签中，通过绑定属性，name和age给DX组件传参
在Dx组件所在的文件中，通过this.props.name和this.props.age的方式来使用这两个参数，由父组件传向子组件的参数，都是只读的，不能再子组件重新赋值

既然有了构造函数可以创建组件，为什么还要用class来创建组件呢？
因为class可以有自己组件的私有数据，这是两者的区别

来一个class组件升级版

import React from 'react'
class Dx extends React.Component {constructor () {super()this.state = {work: '前端开发工程师'}//存储组件自己的数据}
//如果想要改变class类的属性，必须通过constructor方法 es6语法
//由于组件类是继承的方法，在constructor方法中，必须调用super()方法，es6语法规定render () {return <div>name: {this.props.name} age: {this.props.age} <div>{this.state.work}</div>//调用组件自己存储的数据</div>}
}
export default Dx

因为props只是从父组件接收过来的参数，只能读不能改，react的提供state来储存属于组件自己的数据

最后
对比一下这两种创建组件方式的差异

class创建一个组件相对于构造函数来说，class创建的组件有自己的私有数据，class创建的组件有生命周期，所以更加推荐通过es6的class来创建组件

构造函数创建的组件被称为无状态组件
class创建的组件被称为有状态组件