1.一个普通的 构造函数就是 组件
function Hello(props ) {
// props 所有的属性都是只读的
// 接受父组件传递过来的参数
// 结论：不论是 vue 还是 React 组件中的props 永远都是只读的，不能重新赋值
// 如何在一个组件中 return 一个null ，表示组件是空的，什么都不会渲染
// return null
//在组件中，必须返回一个合法的 JSX 虚拟DOM 元素
let name = props.name // 大黄
return <div>这是Hell哦哦哦</div>
}
// 给组件传递参数 在组件上加属性
let name = '大黄'
ReactDOM.render(
<Hello name={name}></Hello>
,document.getElementById('app')
)
给组件传递props 参数步骤：
1.给组件添加属性，使用 <Hello name={name}></Hello>
let dog = {
name :'基督教'，
age：18，
}
// 方式一
<Hello name={dog.name} age = {dog.age}>
</Hello>
// 方式二
<Hello (...dog)>
</Hello>
2.在组件构造函数中接受参数function Hello(props ) {} 参数在props对象中 props 是只读的
2 创建一个JSX文件
1 创建一个 Demo.jsx文件
import React from 'react'; // 创建组件，虚拟DOM元素，生命周期
//我们看到，代码中除了开头引入时出现了React，其它地方都没有其踪影。但是当去掉import React from "react"时，程序却会执行出错ReferenceError： React is not defined。
// 为什么每个函数组件需要引入 react 因为 我们的JSX语法只是一种语法糖，它最终会被转译成纯粹的js语法，因此在babel转译之后，我们的代码就变成了：
//比如
const App = () => (
<div>Hello World!!!</div>
);
//转译后的
var App = function App() {
return React.createElement(
"div",
null,
"Hello World!!!"
);
};
function Demo(props) {
return <div>这是一个组件</div>
}
// 把组件导出
export default Demo
2.然后在需要使用组件的地方引入组件
// 默认，如果不做单独的配置，不能省略 .jsx 后缀名
import React from 'react'; // 创建组件，虚拟DOM元素，生命周期
import ReactDOM from 'react-dom' ;//把创建好的组件和虚拟DOM放到页面上展示的
import Demo from './../components/Demo.jsx'
ReactDOM.render(
<div>
<Hello name={name}></Hello>
<Demo></Demo>
</div>
,document.getElementById('app')
)
如果想省略.jsx 后缀名的话 需要配置 webpack
在webpack.config.js 加入 resolve
module.exports = {
mode:'production' ,//development production
//在 webpack 4.x 中。有个很大的特性，就是约定大于配置 约定，默认打包入口路径是 src -> index.js
//那些node 支持 chrome 支持的就行
plugins:[
htmlPlugin
],
module: { //所有第三方 模块的配置规则
rules: [
{ test: /\.js|jsx$/, use: 'babel-loader', exclude: /node_modules/ }
// 千万不要忘记加 exclude 排除选项
]
},
resolve:{
extensions:['.js','.jsx','.json'] ,//表示这几个文件的后缀名，可以省略不写，这几个位置很重要 按顺序补全的
alias:{
'@':path.join(__dirname,"./src") // 配置别名
}
}
}
3 将组件用Class 创建
import React from 'react'; // 创建组件，虚拟DOM元素，生命周期
import ReactDOM from 'react-dom' ;//把创建好的组件和虚拟DOM放到页面上展示的
// 如果要使用 class 定义组件，必须让自己的组件，继承自React.Component
// class 组件名称 extends React.Component{
//
// // 在组件内部，必须有 render 函数
//
// render(){
//
// //render 函数中，必须返回合法的 JSX 虚拟 DOM 结构
// return <div>jskdksk</div>
// }
// }
var arr = [1, 1, 1, 1, 1, 1, 1, 1, 1, 1]
class Movie extends React.Component {
constructor(){
// 由于Movie组件，继承了 React.Component 这个父类，所以自定义的构造器中，必须调用super()
super()
this.state = {
msg :'大家好我是 Movie 私有组件'
} // 这个 this.state={} 就相当于 Vue 中的 data(){return{}}
}
render() {
// return null
// 在class 关键字 创建 的组件中，如果要使用 外界传递过来的 props 参数，不需要接收，直接通过哦this.props.****来接收
return <div>
这是 movie
{
arr.map((item) => {
return <div>{item}</div>
})
}
{/*{注意在 class 组件中 this 指向当前组件的实例对象}*/}
<div>{this.props.name}</div>
{/*{state私有数据}*/}
<div>{this.state.msg}</div>
</div>
}
}
export default Movie
3 两种创建组件方式的对比
注意：使用class 关键字创建的组件，有自己的私有数据 和生命周期
注意：使用function 创建的组件，只有props ，没有自己私有数据和生命周期函数。
class 创建出来的 state 可读可写
1.用构造函数创建出来的组件：叫做无状态组件（无状态组件今后用的不多）
2.用class 关键字创建出来的组件：叫做有状态组件
有状态组件和无状态组件之间的本质区别就是：有误state 属性，和有无生命周期
3：什么情况下使用有状态组件？什么情况下使用无状态组件？
如果一个组件需要自己的私有数据，则推荐使用Class 创建的 有状态组件
如果一个组件不需要私有数据，则推荐使用：无状态组件
React 官方说：无状态组件，由于没有state和 生命周期函数 所以运行效率会比有状态组件快一些
4.组件中的 props 和 state/data 之间的区别
props 中的数据都是外界传过来的
state/data 中的数据，都是组件私有的
props中的数据都是只读的，不能重新赋值
state/data中的数据都是可度可写的
网友评论