React 基本简介

React--7天从基础到进阶

什么是 React

用于构建用户界面的 JavaScript 库

React API 是处理视图的 API 集合

• React 仅仅负责 View 层渲染

• 一个视图渲染的工具库，不做框架的事情（打包、utils 等）

React 组件组成

一个 React 组件基本组成：

1. 继承 React.Component

2. render 函数返回一个视图

ReactDOM.render: 将 React 元素解析为虚拟 DOM，再渲染为真实 DOM

class MyBtn extends React.Component {

  render() {

    return <div>myBtn</div>;

  }

}

render 之前：

1. 所有的 JSX 都会转成字符串

2. 所有输入的内容都会转义

JSX

JSX 是什么？

1. 一种标签语法，js 进行的语法扩展

2. 不是字符串，也不是 HTML 标签

3. 描述UI呈现与交互的直观形式

4. 被编译后最终是生成 React 元素

5. 单标签必须要闭合

createElement 与 JSX 对比

JSX 被编译后会变成 React 元素，而 createElement 可以直接创建一个 React 元素

为什么 React 不把视图和逻辑分开？

1. 渲染和 UI 标记是有逻辑耦合的，特意将逻辑放在 UI 上，更直观

2. 即时是这样的耦合，也能实现关注点分离（主逻辑可以抽离到外部）

ReactDOM.render

1. HTML 中的 div 容器是根节点

2. 根节点内所有内容都是由 ReactDOM 进行管理

3. 一个 React 应用只有一个根节点

4. 用 ReactDOM.render 方法将 React 元素渲染到根节点中

5. 会深度地对比新旧元素的状态，只会做必要的真实 DOM 更新

渲染之前，每个 React 元素组成一个虚拟 DOM 对象结构；

更新之前，形成新的虚拟 DOM 对象结构，对比新旧虚拟 DOM 节点，分析出两者的不同点，形成一个 DOM 更新的补丁，更新真实 DOM

ReactDOM.render(

  // react 元素，

  // 根节点

)

react 元素/组件调用规范：

1. 使用 JSX 语法

2. 使用 React.createElement 将组件转换为 React 元素

3. HTML 标签

<MyBtn title="xxx" />

React.createElement(MyBtn, { title: xxx })

<div>abc</div>

React 元素是不可变的对象(immutable object)

• 不能添加属性

• 不能修改属性

• 不能删除属性

• 不能修改属性的枚举（enumerable）、配置（configurable）、可写（writable）

• 只能由一个根元素

React 组件渲染流程

1. React 主动调用 Test 组件

2. 将属性集合转换对象 props -> { title: xxx }

3. 将对象作为 props 传入组件

4. 替换 JSX 中 props 或者 state 中的变量

5. ReactDOM 将最终的 React 元素通过一系列操作转换成真实 DOM 进行渲染

props 和 state 区别：

1. state 数据池，组件内部管理数据的容器，组件内部可写可读

2. props 属性池，外部调用组件时传入的属性集合，组件内部可读不可写

函数组件一定是一个纯函数，纯函数能保证绝对的复用性

组件：

1. 组件的视图片段

2. 包含视图标记、事件、数据、逻辑、外部配置项

componentDidMount: 组件已经渲染到 DOM 中以后运行，已经被挂载到真实 DOM 中后运行的函数

state 使用注意事项：

1. 必须使用 setState 方法更改 state

2. 多个 setState 会合并调用

3. props 和 state 更新数据要谨慎，尽量避免直接依赖他们

this.setState((state, props)=>{

  // state：指代上一个 state

  // props：此次更新时使用的 props

})

4. setState 操作合并是浅合并

this.state = {

  obj,

  arr

}

// 只改变 obj 的引用值，arr 引用保持不变

this.setState({

  obj: newObj

})

5. 给 state 赋值时，要使用全新的值（引用），避免使用原值覆盖

// 1

this.setState({

  arr: [...this.state.arr, 4]

})

// 2

var newArr = this.state.arr.concat(4)

其他

1. 组件无论如何都是不知道其他组件是否是有状态的

2. 组件也并不关心其他组件是函数组件还是类组件

3. state 是组件内部特有的数据封装

4. 其他组件时无法读写修改组件的 state

5. 组件可以通过其他组件调用的时候传入属性

6. props 虽然是响应式的，在组件内部是只读的，所以仍然无法修改其他组件的 state

7. 这种数据（状态）由上而下传递的方式，叫做单向数据流

8. state 只能传递给自己的子组件，即只能影响当前组件的 UI

9. 组件有无状态是可以切换的，例如，可以在事件函数中增加 state

  handleBtnClk() {

    this.state = {

      title: "this.state.title",

    }

  }

npx：npm v5.2+ 的包运行工具