react 脚手架环境安装以及实现过程

14

react 脚手架环境安装

搭建react脚手架–必须配置好babel es6-es5解析jsx
即 yarn add babel-loader @babel/core @babel/preset-env
配置react还要下载 yarn add react react-dom @babel/preset-react

react 官方脚手架环境

npm i create-react-app -g

react安装失败的情况，解决办法

(失败的情况下1.管理员身份打开powerShell 2.输入set-ExecutionPolicy RemoteSigned 选A)

检测

create-react-app --version

创建项目

create-react-app 项目的名字

运行

yarn start 

下载ES7 React/Redux/GraphQL/React-Native snippets
无状态组件输入 rfc 类组件输入rcc 就会创建属于自己的组件

15-1

react组件的传值

方法一 1父组件将向子组件传值 属性传递props接收 props是只读不能改的
2 子组件向父组件传值 子组件调用父组件方法，通过参数进行传值的
state来自于父组件的props derivedState 原生状态
方法二观察者模式
方法三公共的
安装yarn add pubsub-js 这个是兄弟组件传值工具
pubsub-js
Pubsub.publish(“事件名”,"数据”）—（$emit）触发事件Pubsub.subscribe{(}^{\prime }事件{名}^{\prime },(evtName，data)=>)---($on)监听事件
15-2受控组件与非受控组件
受控组件是受到控制的组件

react的钩子函数 1-1挂载阶段的钩子函数

****constructor（props，context） 构造函数****
state getDerivedStateFromProps(props,state)
**render() 渲染
componentDidMount()模块渲染后**
（static静态方法，直接用类名调用，因为没有经过实例化，所以不能用this）

16-2更新阶段的钩子函数 -顺序

static getDeriveStateFromProps(props.context)

shouldComponentUpdate(nextProps,nextState) 做性能优化，返回布尔值 true render false不渲染
	(PureComponent 纯组件 浅比对 可以优化渲染的次数)
	无状态组件是用React.memo(无状态组件)

render()渲染

getSnapshotBeforeUpdate（prevProps，prevState) 返回Snapshot 数据更新前的dom状态，必须和componentDidUpdate连用

componentDidUpdate(prevProps，prevState，snapShot) 监控组件里的数据变化

16-3卸载

componentWillUnmount

（ReactDOM.unmountComponentAtNode）

16-4

context 传值 （高级）

createContext（） Provider 提供数据 Consumer消费数组

16-5 children

<组件>中间的内容 </组件>
 组件里用{this.props.children} 拿到中间的内容

16-6高阶组件 Hoc（组件名） ：
本质是高阶函数 ：

参数是组件 ，返回值也是组件 ，这样的组件就是高阶组件