react+react-native混合App开发--初次上手

一、开发前准备

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，渲染固定的页面结构，那么使用函数组件合适