React学习笔记（三）—— 中创建组件的方式

第一种方式：在index.js文件中(用function创建)

// 组件的名称首字母必须是大写
function Hello(){
// 必须返回一个合法的虚拟DOM元素或者null
    return <div>这是一个hello组件</div>
}
ReactDOM.render( <div>
    <Hello></Hello>
</div>, document.getElementById('app'))

• 为组件传递数据：方式一

const dog={
    name:'dahuang',
    age:'11'
}
function Hello( props){
	// props中的数据是只读的，不能被重新赋值，在Vue中也是一样
    return <div>这是一个hello组件--{props.name}--{props.age}</div>
}
ReactDOM.render( <div>
    <Hello name={dog.name} age={dog.age}></Hello>
</div>, document.getElementById('app'))

• 为组件传递数据：方式二

const dog={
    name:'dahuang',
    age:'11'
}
function Hello( props){
    return <div>这是一个hello组件--{props.name}--{props.age}</div>
}
ReactDOM.render( <div>
    <Hello {...dog}></Hello>
</div>, document.getElementById('app'))

第二种方式：将组件抽离为单独的.jsx文件(用function创建)

• .jsx文件中的代码

import React from 'react'
export default function Hello(props) { // 创建组件并导出
    return <div name={props.name}>这是一个hello组件--{props.name}--{props.age}</div>
}

• index.js文件中的代码

import 组件名称 from '组件的路径'   // 引入组件，不省略后缀名
const dog={
    name:'dahuang',
    age:'11'
}
ReactDOM.render( <div>
    <Hello {...dog}></Hello>
</div>, document.getElementById('app'))

• 如果引入组件时想省略文件的后缀名，需要在webpack.config.js文件中module.exports = {}（导出的配置对象）加入如下代码

resolve:{ 
        extensions:['.js','.jsx','.json']  // 表示这几个文件的后缀名可以省略不写
    }

• 如果想用@表示项目根目录下的src这一层路径，需要在webpack.config.js文件中module.exports = {}（导出的配置对象）加入如下代码

resolve:{ 
        alias:{
            '@':path.join(__dirname,'./src')  // 用@表示项目根目录下的src这一层路径
        }
    }

第三种方式：使用ES6中的class关键字来创建组件

• 语法：

class 组件名 extends React.Component{
	// 在组件内部必须有render()函数
	render (){
		// render()函数中必须返回合法的jsx结构虚拟DOM
		return <div>这是class创建的组件</div>
	}
}

• 传递数据

const dog={
        name:'dahuang',
        age:'11'
}
class Movie extends React.Component{
        // class 关键字创建的组件中，想使用外部传递的数据，不需要接受，直接使用this.props.XXX访问
        render(){
        	// 无论是class创建的组件或者class创建的组件，props里面的数据都是只读的
            return <div>这是class创建的组件--{this.props.name}</div>
        }
    }
ReactDOM.render(<div>
	<Movie {...dog}></Movie>
</div>, document.getElementById('app'))

class Movie extends React.Component{
     	constructor(){
			super()
			this.state={}   //  这个this.state={}相当于Vue组件中的data(){ return{} }，绑定组件内部私有数据，数据可读，并可写
		}
        render(){
            return <div>这是class创建的组件--{this.props.name}</div>
        }
    }

class关键字创建组件和function创建组件的对比

1. 用function（构造函数）创建的组件叫无状态组件；用class（关键字）创建的组件叫有状态组件
2. 使用function创建的组件只有props，没得自己的私有数据和生命周期函数；而使用class关键字创建的组件有自己的私有数据和生命周期函数
3. 有状态组件和无状态组件区别：有无state属性和有无生命周期函数
4. 有状态组件比无状态组件运行效率低
5. 组件中props和state之间的区别

	1.props中的数据是外界传递的；state中的数据是自己私有的
	2.props中的数据是只读的；state中的数据是可读可写的