react 中使用组件
两种方式，组件中的数据只读
组件名，首字母必须大写
1 function定义组件（函数）
没有私有数据和生命周期函数，无状态组件；运行效率略高
import React from 'react'
import ReactDOM from 'react-dom'
function Hello(props) { {/* 组件的首字母必须大写 */}
return <h1>name: {props.name}</h1> {/* 必须有return方法，一般是jsx数据，获取传的参数对象的数据 */}
}
const obj = {
"name": "lynn",
"age": 18,
}
const myEle = <div>
123
<Hello name={obj.name}></Hello> {/* 作为一个标签元素，被用。传参数 */}
<Hello {...obj}></Hello> {/* 展开运算符，可以把所有字段传给组件 */}
</div>
ReactDOM.render(myEle, document.getElementById('app'))
注意：
创建组件直接用function创建函数
在jsx语法中，直接<组件名></组件名>使用组件
组件传参：
定义时，加形参，是一个对象（字典）；
传参数，直接<组件名 形参对象中的字段名={字段名对应的数据}>
把组件放在单独的文件中
src下创建文件夹componts存放组件
例：
hello.js文件
import React from "react";
export default function Hello(props) { // 定义并把组件暴露出去，其他文件能导入
return <h1>name: {props.name}</h1>
}
// 把组件暴露出去
// export default Hello
index.js
import React from 'react'
import ReactDOM from 'react-dom'
import Hello from "@/componts/hello.js";
const obj = {
"name": "lynn",
"age": 18,
}
const myEle = <div>
123
<Hello name={obj.name}></Hello>
</div>
ReactDOM.render(myEle, document.getElementById('app'))
一些配置：
Web pack.config.js
const path = require('path')
const HtmlWebPackPlugin = require('html-webpack-plugin')
// 创建实例
const htmlPlugin = new HtmlWebPackPlugin(
{
template: path.join(__dirname, '/src/index.html'),
filename: 'index.html' // 内存中首页的名称
}
);
module.exports = {
mode: 'development',
plugins: [
htmlPlugin
],
module: { // 所有第三方模块的配置规则
rules: [ // 第三方规则
{
test: /\.js|jsx$/,
use: 'babel-loader',
exclude: /node_modules/ // 必须要添加这个
}
]
},
resolve: {
extensions: ['.js', '.jsx', '.json'], // 自定义导入文件，可以省略的后缀名
alias: {
'@': path.join(__dirname, './src') // @表示根目录下的src路径
}
}
};
2 class定义组件（类）- 推荐
因为可以有私有数据和生命周期函数，有状态组件；运行效率略低
01 定义并简单实用
语法
必须有render()函数，且返回值必须是，jsx的对象
必须继承React.Component
class 组件名 extends React.Component{
render(){
return <div>这是一个组件</div>
}
}
例子：
import React from 'react'
import ReactDOM from 'react-dom'
class MyConpent extends React.Component{
render(){
return <div>这是一个div </div> // 这必须是jsx的语法数据
}
}
const myEle = <div>
123
<MyConpent></MyConpent>
</div>
ReactDOM.render(myEle, document.getElementById('app'))
02 参数
import React from 'react'
import ReactDOM from 'react-dom'
class MyConpent extends React.Component{
render(){ // 接受参数，不需要定义形参
return <div>这是一个div
<li>{this.props.name}</li>
<li>{this.props.age}</li>
<li>{this.props.message}</li>
</div> // 这必须是jsx的语法数据
}
}
const user = {
"name": "lynn",
"age": 18,
"message": "ok"
}
const myEle = <div>
123
<MyConpent name={user.name} age={user.age} message={user.message}></MyConpent>
<MyConpent {...user}></MyConpent>
</div>
ReactDOM.render(myEle, document.getElementById('app'))
注意：
...对象名，表示把整个对象，打乱了，传到方法中
render()函数，接受参数时，不需要定义形参
03 私有数据
class关键字定义的组件才有自己的私有数据和生命周期函数
import React from 'react'
import ReactDOM from 'react-dom'
class MyConpent extends React.Component{
constructor(){
super()
this.state = { // 这个是私有数据
msg: "这是私有的"
}
}
render(){
this.state.msg = "被修改" // 私有数据可以被修改的
return <div>这是一个div
<li>{this.props.name}</li>
<li>{this.props.age}</li>
<li>{this.props.message}</li>
<h3>{this.state.msg}</h3> // 调用私有数据
</div> // 这必须是jsx的语法数据
}
}
const user = {
"name": "lynn",
"age": 18,
"message": "ok"
}
const myEle = <div>
123
<MyConpent name={user.name} age={user.age} message={user.message}></MyConpent>
<MyConpent {...user}></MyConpent>
</div>
ReactDOM.render(myEle, document.getElementById('app'))
注意：
公共数据是不能修改的，只读
私有数据可以修改
私有数据可以在render()函数中被调用：this.state.msg
this.props中的数据都是外界传递的，只读
this.state中的数据，都是组件私有的，（通过AJAX获取的数据一般都是私有数据），可读可写
