一、开发前准备
1、安装 react 依赖
在项目下安装依赖
cnpm install react react-dom --save
cnpm install babel-preset-react --dev
修改配置文件 .babelrc :
{
"presets":["evn","stage-0","react"]
}
2、为 jsx 进行配置
在 webpack.config.js 中,修改 js 为 jsx?
module:{
rules:[
{ test: /\.jsx?$/, use: 'babel-loader', exclude: /node_modules/ }
]
}
到这里,项目开发前的准备工作结束,接下来就可以开始代码编写了
二、知识说明:函数组件和类组件
3、函数组件和类组件的区别
关于 props 的使用,这两类组件有几个区别:
- 获取props属性的区别
- 读写props属性值的区别
关于 state 的使用,有以下区别:
- 类组件中有自己的私有 state(称为有状态组件),函数组件中没有私有 state(称为无状态组件)
关于 生命周期,有以下区别:
- 类组件中有自己的生命周期函数,函数组件中没有
3.1 获取 props 的区别
在函数组件中,如果想要使用 props,必须先定义:在参数中写入 props
function MyCom(props) {
return <p>{props.name}</p>
}
在类组件中,使用 props 不需要定义,可以直接通过 this 来拿到
class MyCom extends React.Component{
render() {
return <p>{this.props.name}</p>
}
}
3.2 读写 props 的区别
针对 props,二者均为只读
在函数组件中,对于 props 属性值,是只读的(read only)
在类组件中,对于 props 属性值,是只读的(read only)
4、函数组件和类组件的使用场景
若一个组件需要有私有数据,或者需要在不同阶段执行不同的业务逻辑(即需要生命周期),那么使用类组件合适
若一个组件只需要根据外界传来的 props,渲染固定的页面结构,那么使用函数组件合适