react 入门学习笔记

react create

react 快速构建 node 要大于 6 版本 项目构建脚手架命令： npm install create-react-app -g

C:\Users\MR\AppData\Roaming\npm\create-react-app -> C:\Users\MR\AppData\Roaming\npm\node_modules\create-react-app\index.js

特定是不需要任何的配置，快速 完成react的环境配置

创建项目：create-react-app my-project

create-react-app 命令不失败

可以使用 npx create-react-app my-project 进行安装.

启动

cd my-project npm start

yarn: yarn start 启动

boostrap 引入

npm install boostrap --save

control + C 可以关闭程序的运行，装上bootstrap后再运行 npm run start

context

Props 属性是 由上到下 单向传递的 Context 提供了在组件中共享此类值的方法 设计目的是共享那些对于组件来说全局的数据 不要仅仅为了避免在几个层级下的组件传递props而使用context

vs code 编辑器插件

VS Code Reactjs snippets 代码块模块快捷键

Npm Intellisense 导入补全

Path Intellisense 路径补全

Prettier 代码格式

redux 和 mobx ， mobx 更好，但是 项目使用 redux

官方解释：redux 是 js 应用的可预测状态的容器。 可以理解为全局数据状态管理工具（状态管理机），用来做组件通信等。 https://www.jianshu.com/p/b872ec0f3f5c

试读：https://www.imooc.com/read/72

学习深入

https://www.imooc.com/read/83

高级函数

1. 函数可以作为 参数被传递
2. 函数可以作为返回值输出

高阶组件

1. 高阶组件就是接受一个组件作为参数并返回一个新组件的函数
2. 高阶组件是一个函数，并不是一个组件

编写高阶组件

1. 实现一个普通组件
2. 将普通组件使用函数包裹

function d(WrapperComponent){
	return class D extends Component {
		render() {
			return (
				<div>
					<WrapperComponent></WrapperComponent>
				</div>
			);
		}
	}
}
export default d;

使用高阶组件

1. 示例 （简单使用，其他方式比较繁琐忽略）

import React, { Component } from "react";
// import A from "./A";
import d from "./D";
class C extends Component {
  render() {
    return <div>C组件</div>;
  }
}
// export default A(C);
export default d(C);

2. 注解使用： @ 装饰器注解

高级组件应用

代理方式的高阶组件: 尽量使用代理

返回的新组件类直接继承自 React.Component

1. 操纵prop
2. 抽取状态
3. 访问ref
4. 包装组件

继承方式的高阶组件

采用继承关联作为参数的组件和返回的组件，假如传入的组件参数是WrappedComponent , 那么返回的组件就直接继承自 WrappedComponent

1. 操纵prop（没有代理组件功能强，很少用）
2. 操纵生命周期函数

高阶组件显示名

用于调试输出显示, 可以在浏览器安装React 插件进行调试来方便使用

路由 router

安装

npm install react-router-dom --save