React 基本简介（1）

什么是 React

用于构建用户界面的 JavaScript 库

React API 是处理视图的 API 集合
React 仅仅负责 View 层渲染
一个视图渲染的工具库，不做框架的事情（打包、utils 等）

React 组件基本组成

继承 React.Component
render 函数返回一个视图

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


class MyBtn extends React.Component {

  render() {

    return <div>myBtn</div>;

  }

}

render 之前：

所有的 JSX 都会转成字符串
所有输入的内容都会转义

JSX

JSX 是什么？

一种标签语法，js 进行的语法扩展
不是字符串，也不是 HTML 标签
描述UI呈现与交互的直观形式
被编译后最终是生成 React 元素
单标签必须要闭合

createElement 与 JSX 对比

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

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

渲染和 UI 标记是有逻辑耦合的，特意将逻辑放在 UI 上，更直观
即使是这样的耦合，也能实现关注点分离（主逻辑可以抽离到外部）

ReactDOM.render

HTML 中的 div 容器是根节点
根节点内所有内容都是由 ReactDOM 进行管理
一个 React 应用只有一个根节点
用 ReactDOM.render 方法将 React 元素渲染到根节点中
会深度地对比新旧元素的状态，只会做必要的真实 DOM 更新

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

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


ReactDOM.render(

  // react 元素，

  // 根节点

)

react 元素/组件调用规范：

使用 JSX 语法
使用 React.createElement 将组件转换为 React 元素
HTML 标签


<MyBtn title="xxx" />

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

<div>abc</div>

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

不能添加属性
不能修改属性
不能删除属性
不能修改属性的枚举（enumerable）、配置（configurable）、可写（writable）
只能有一个根元素

React 组件渲染流程

React 主动调用 Test 组件
将属性集合转换对象 props -> { title: xxx }
将对象作为 props 传入组件
替换 JSX 中 props 或者 state 中的变量
ReactDOM 将最终的 React 元素通过一系列操作转换成真实 DOM 进行渲染

props 和 state 区别：

state 数据池，组件内部管理数据的容器，组件内部可写可读
props 属性池，外部调用组件时传入的属性集合，组件内部可读不可写

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

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

state 使用注意事项：

必须使用 setState 方法更改 state
多个 setState 会合并调用
props 和 state 更新数据要谨慎，尽量避免直接依赖他们


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

  // state：指代上一个 state

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

})

setState 操作合并是浅合并


this.state = {

  obj,

  arr

}

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

this.setState({

  obj: newObj

})

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


this.setState({

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

})

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

其他

组件无论如何都是不知道其他组件是否是有状态的
组件也并不关心其他组件是函数组件还是类组件
state 是组件内部特有的数据封装
其他组件是无法读写修改组件的 state
组件可以通过其他组件调用的时候传入属性
props 虽然是响应式的，在组件内部是只读的，所以仍然无法修改其他组件的 state
这种数据（状态）由上而下传递的方式，叫做单向数据流
state 只能传递给自己的子组件，即只能影响当前组件的 UI
组件有无状态是可以切换的，例如，可以在事件函数中增加 state


  handleBtnClk() {

    this.state = {

      title: "this.state.title",

    }

  }

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

原文始发于微信公众号（前端华先生）：React 基本简介（1）

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/55352.html