React 脚手架

安装node

• React脚手架本身需要依赖node，

• 所以我们需要安装node环境：无论是windows还是Mac OS，都可以通过node官网直接下载；

• 官网地址：nodejs.org/en/download…

• 注意：这里推荐大家下载LTS（ Long – term support ）版本，是长期支持版本，会比较稳定；

什么是npm？

1. 全称 Node Package Manager，即“node包管理器”；

2. 作用肯定是帮助我们管理一下依赖的工具包（比如react、react-dom、axios、babel、webpack等等）；

3. 作者开发的目的就是为了解决“模块管理很糟糕”的问题；

Yarn和npm命令对比

React脚手架默认也是使用yarn；

npm install -g yarn

安装脚手架

补充：在国内，某些情况使用npm和yarn可能无法正常安装一个库，这个时候我们可以选择使用cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

最后一个需要安装的是创建React项目的脚手架

npm install -g create-react-app

创建React项目

创建React项目的命令如下：

注意：项目名称不能包含大写字母 p 另外还有更多创建项目的方式，可以参考GitHub 的readme

create-react-app 项目名称

创建完成后，进入对应的目录，就可以将项目跑起来：

cd 01-test-react 
 
 yarn start 
 
复制代码

脚手架

React脚手架将webpack相关的配置隐藏起来了
package.json文件中的一个脚本：
"eject": "react-scripts eject"

暴露之前 如果修改了代码就要提交一下

还原webpack

webpack 会默认把js后缀给自动加上

用react脚手架创建的项目很大 所以开发中都是使用npm install 安装依赖

模块化管理：

src上自定义一个js文件要先导出 再到index.js导入

有defluct 默认导出 就在导入的时候不用加大括号 导出多个 就用{}

安装插件 ：htmltagwrap 代码补全

上面的方法行不通在设置输入 includeLanguages 点击settings.json

• 添加这段代码：

 "emmet.includeLanguages": {
        "javascript": "javascriptreact"
    }
复制代码

index.js 这是webpack打包的入口

React的组件相对于Vue更加的灵活和多样，按照不同的方式可以分成很多类组件：

1. 根据组件的定义方式，可以分为：函数组件(Functional Component )和类组件(Class Component)；
2. 根据组件内部是否有状态需要维护，可以分成：无状态组件(Stateless Component )和有状态组件(Stateful Component)；

根据组件的不同职责，可以分成：展示型组件(Presentational Component)和容器型组件(Container Component)；这些概念有很多重叠，但是他们最主要是关注数据逻辑和UI展示的分离：

• 函数组件、无状态组件、展示型组件主要关注UI的展示；
• 类组件、有状态组件、容器型组件主要关注数据逻辑；
• 当然还有很多组件的其他概念：比如异步组件、高阶组件等，我们后续再学习

类组件的定义有如下要求：

1. 组件的名称是大写字符开头（无论类组件还是函数组件）
2. 类组件需要继承自 React.Component
3. 类组件必须实现render函数

使用class定义一个组件

1. constructor是可选的，我们通常在constructor中初始化一些数据；
2. this.state中维护的就是我们组件内部的数据；
3. render() 方法是 class 组件中唯一必须实现的方法；

render函数的返回值

当 render 被调用时，它会检查 this.props 和 this.state 的变化并返回以下类型之一：

1. React 元素：

 
   
  通常通过 JSX 创建。 
  例如，<div /> 会被 React 渲染为 DOM 节点，<MyComponent /> 会被 React 渲染为自定义组件； 
  无论是 <div /> 还是 <MyComponent /> 均为 React 元素。


复制代码

2. 数组或 fragments：使得 render 方法可以返回多个元素。
3. Portals：可以渲染子节点到不同的 DOM 子树中。
4. 字符串或数值类型：它们在 DOM 中会被渲染为文本节点
5. 布尔类型或 null：什么都不渲染。

react 生命周期

我们谈React生命周期时，主要谈的类的生命周期，因为函数式组件是没有生命周期函数的；（后面我们可以通过hooks来模拟一些生命周期的回调）

1. 实现componentDidMount函数：组件已经挂载到DOM上时，就会回调；
2. 实现componentDidUpdate函数：组件已经发生了更新时，就会回调；
3. 实现componentWillUnmount函数：组件即将被移除时，就会回调；

不常用的生命周期：

• getDerivedStateFromProps：state 的值在任何时候都 依赖于 props时使用；该方法返回一个对象来更新state；

• getSnapshotBeforeUpdate：在React更新DOM之前回 调的一个函数，可以获取DOM更新前的一些信息（比如 说滚动位置

在类里面一般叫做方法 有this的绑定 有没有实例联系在一起 => 方法

认识组件间的通信

React Developer Tools工具

React Developer Tools会自动检测React组件，不过在webpack-dev-server模式下，webpack会自动将React组件放入到iframe下，导致React组件检测失败，变通方法是webpack-dev-server配置在–inline模式下即可。

下载地址：www.crx4chrome.com/crx/3068/

跨组件通信 context

Context相关API：

React.createContext:

一个组件订阅了Context，那么这个组件 (Profile)会从离自身最近的那个匹配的 Provider 中读取到当前的context值；
defaultValue是组件在顶层查找过程中没有找到对应的Provider，那么就使用默认值

//创建Context 对象
const UserContext = React.createContext({
    nickname:'lumingqing',
    level:1
})
复制代码

Context.Provider

• 每个 Context 对象都会返回一个 Provider React 组件，它允许消费组件订阅 context 的变化：
• Provider 接收一个 value 属性，传递给消费组件；
• 一个 Provider 可以和多个消费组件有对应关系；
• 多个 Provider 也可以嵌套使用，里层的会覆盖外层的数据；
• 当 Provider 的 value 值发生变化时，它内部的所有消费组件都会重新渲染；

//app 的数据传递给profile 再传递给profileHeader
export default class App extends Component {

    constructor(props) {
        super(props);
        this.state = {
            nickname:'lulu',
            level:'20'
        }
    }
    render() {
      
        return (
            <div>
                <UserContext.Provider value = {this.state}>
                     <Profile/>
                </UserContext.Provider>

            
                
                
            </div>
        )
    }
}
复制代码

Class.contextType :

• 挂载在 class 上的 contextType 属性会被重赋值为一个由 React.createContext() 创建的 Context 对象：
• 这能让你使用 this.context 来消费最近 Context 上的那个值；
• 你可以在任何生命周期中访问到它，包括 render 函数中；

ProfileHeader.contextType = UserContext;

复制代码

Context.Consumer

• 这里，React 组件也可以订阅到 context 变更。这能让你在 函数式组件 中完成订阅 context。
• 这里需要 函数作为子元素（function as child）这种做法；
• 这个函数接收当前的 context 值，返回一个 React 节点；

ps：

• jsx 里面的标签是严格要求小写的 标签大写开头 会认为是组件
• vscode 代码块 react Component生成插件：ES7 React/Redux/GraphQL/React-Native snippets

setState 源码位置

banbene

react版本是16.13.1

版本二

经常看的几个源码文件夹

续集……