React开发笔记

React开发笔记

React设计

React立意选取最小块设计，元素化每个dom标签，在内存中进行操作，引起Dom的最小render，节约Html的性能，单向数据流自上而下，采用函数化和面向对象思想，给予每个模块最灵活的操作和对开发者极大的便利，React的最大优点并不是继承，而是组合Dom组件。

React趋势：面向对象编程走向面向对象编程+函数式编程，拥抱社区，限制较小。

一、性能特点

1、创建虚拟DOM的两种方式（本质：创建Dom对象调用）

纯JS方式（一般不用,过于繁琐）

JSX方式（简单方便，最终由babel翻译成js的形式，与用js写的结果一样）

2、jsx和虚拟Dom是什么？

• jsx，全称: JavaScript XML
• babel会将xml转换成对象通过React的函数调用渲染成每个独立的最小块真实Dom。

3、生命周期（递归循环生命周期）

component在不同时间段进行的变化对应的钩子函数引起视图或数据的改动。

react 生命周期

componentWillMount // 将要挂载

render // Dom

componentDidMount // 已经挂载

shouldComponentUpdate nextProps nextState // state更新的钩子

render // 渲染真实Dom

componentDidUpdate /更新引起视图更新

componmentWillUnmount // 卸载组件时候取消副作用

componmentunMount // 已经卸载

父子组件执行挂载顺序

react 生命周期指的是组件从创建到卸载的整个过程，每个过程都有对应的钩子函数会被调用，它主要有以下几个阶段：

挂载阶段 ：组件实例被创建和插入 DOM 树的过程

更新阶段 ：组件被重新渲染的过程

卸载阶段 ：组件从 DOM 树中被删除的过程

下文分别从上述三个阶段解读react的生命周期

【1】旧版生命周期

挂载阶段：componentWillMount - render - componentDidMount

更新阶段：componentWillReceiveProps - shouldComponentUpdate - componentWillUpdate - render - componentDidUpdate

卸载阶段：componentWillUnmount

挂载阶段

componentWillMount

componentWillMount发生在render之前，此时还没有挂载DOM，有可能会被执行多次

componentDidMount

常用的钩子，在组件挂载成功之后调用，该过程组件已经成功挂载到了真实 DOM 上。

一般在这个钩子中做一些初始化的事，例如：开启定时器、发送网络请求、订阅消息

componentDidMount(){

fetch('').then(res=>res.json()).then(users=>{

console.log(users);

this.setState({users});

});

}

【2】更新阶段

componentWillReceiveProps(newProps)

在props发生改变（父组件重新render或者更新props）时调用，这个钩子提供对 props 的监听，在 props 发生改变后，相应改变组件的一些 state。在这个方法中改变 state 不会二次渲染，而是直接合并 state。

shouldComponentUpdate(nextProps, nextState)

这个钩子相当于一个阀门，返回一个布尔值，决定是否更新组件。

由于 react 父组件更新，必然会导致子组件更新，因此我们可以在子组件中通过手动对比 props 与 nextProps，state 与 nextState 来确定是否需要重新渲染子组件，如果需要则返回true，不需要则返回 false。该函数默认返回 true。

componentWillUpdate

组件更新前调用的钩子

componentDidUpdate

组件更新完成后调用的钩子

因为组件已经重新渲染了所以这里可以对组件中的 DOM 进行操作；

在比较了 this.props 和 nextProps 的前提下可以发送网络请求。

componentDidUpdate(prevProps, prevState, snapshot) { if (this.props.userID !== prevProps.userID) { this.fetchData(this.props.userID); } }

【3】卸载阶段

componentWillUnmount

卸载阶段唯一的生命周期钩子，通常在这里处理一些善后工作，例如关闭定时器、取消监听等等

旧版生命周期执行流

新版生命周期

react 打算在17版本推出新的 Async Rendering（异步渲染），提出一种可被打断的生命周期，而可以被打断的阶段正是实际 dom 挂载之前的虚拟 dom 构建阶段，也就是要被去掉的三个生命周期。

废弃了三个生命周期：componentWillMount,componentWillReceiveProps,componentWillUpdate

新增了两个生命周期：static getDerivedStateFromProps(nextProps, prevState)，getSnapshotBeforeUpdate(prevProps, prevState)

挂载阶段：getDerivedStateFromProps - render - componentDidMount

更新阶段：getDerivedStateFromProps - shouldComponentUpdate - render - getSnapShotBeforeUpdate - componentDidUpdate

卸载阶段：componentWillUnmount

static getDerivedStateFromProps(nextProps, prevState)

该生命周期在 render方法之前调用，在初始化和后续更新都会被调用

它接收两个参数，一个是传进来的 nextProps 和之前的 prevState。他应该返回一个对象来更新 state。如果返回 null 则不更新任何内容。

这个生命周期主要为我们提供了一个可以在组件实例化或 props、state 发生变化后根据 props 修改 state 的一个时机。

getSnapshotBeforeUpdate(prevProps, prevState)

在更新阶段 render 后挂载到真实 DOM 前进行的操作，它使得组件能在发生更改之前从 DOM 中捕获一些信息。此组件返回的任何值将作为 componentDidUpdate 的第三个参数。

getSnapshotBeforeUpdate(prevProps, prevState){

return "getSnapshotBeforeUpdate";

}

// 组件更新成功钩子

componentDidUpdate(prevProps, prevState, snapshot) { console.log(snapshot); // "getSnapshotBeforeUpdate" }

【4】父子组件生命周期执行顺序

父子组件初始化

父组件 constructor

父组件 getDerivedStateFromProps

父组件 render

子组件 constructor

子组件 getDerivedStateFromProps

子组件 render

子组件 componentDidMount

父组件 componentDidMount

子组件修改自身state

子组件 getDerivedStateFromProps

子组件 shouldComponentUpdate

子组件 render

子组件 getSnapShotBeforeUpdate

子组件 componentDidUpdate

父组件修改props

父组件 getDerivedStateFromProps

父组件 shouldComponentUpdate

父组件 render

子组件 getDerivedStateFromProps

子组件 shouldComponentUpdate

子组件 render

子组件 getSnapShotBeforeUpdate

父组件 getSnapShotBeforeUpdate

子组件 componentDidUpdate

父组件 componentDidUpdate

【5】卸载子组件

父组件 getDerivedStateFromProps

父组件 shouldComponentUpdate

父组件 render

父组件 getSnapShotBeforeUpdate

子组件 componentWillUnmount

父组件 componentDidUpdate

4、错误边界

在生命周期捕获渲染的异常，进行报告和统一处理。 getDerivedStateFromError()

2、class继承React.Component

• class组件依赖this对象,每次更新this都会加重this。
• state 在每次setState时，都是异步操作，可以通过setState({},callBack)回调函数同步操作数据。
• 在不更新视图的前提下，尽可能少使用state的使用。
• 尽量使用箭头函数，避免this指向错误。
• 尽可能组合使用每个类，而不是继承。

3、hooks

• hooks组件依赖函数式编程，在es语法完成拆分模块的思想上，对数据进行生命周期的拆分，而引起视图的重新渲染。
• hooks更接近原生开发，但又不是，相对更灵活。

4、Fiber

5、合成事件

如果你想异步访问事件属性，你需在事件上调用 event.persist()，此方法会从池中移除合成事件，允许用户代码保留对事件的引用。

实例将被传递给你的事件处理函数，它是浏览器的原生事件的跨浏览器包装器。除兼容所有浏览器外，它还拥有和浏览器原生事件相同的接口，包括 stopPropagation() 和 preventDefault()。

如果因为某些原因，当你需要使用浏览器的底层事件时，只需要使用 nativeEvent 属性来获取即可。

截止 v0.14，当事件处理函数返回 false 时，不再阻止事件冒泡。你可以选择使用 e.stopPropagation() 或者 e.preventDefault() 替代。

二、基本语法和使用

1、主要依赖

• react、react-dom、
• react-router，react-router-dom、
• react-redux、redux、mobx、
• axios、promise、fetch、
• babel、es6、node、

1、面向对象的使用class类

• 使用继承方式为class添加生命周期。
• super继承父类props

2、使用方式

使用jsx主要依赖于babel、js、react、react-dom

 【1】类组件：

• 在render中return节点数据。
• props使用：this.props.属性，只读
• state：组件状态管理方式，在构造方法中 初始化this.state={}，this.setState({...}),
• 变量：以

{this.state.data}方式嵌入到组件

• 生命周期：componentWillUnmount 、componentDidMount
• 组件的使用：

【2】函数式组件：

• 在函数中直接return节点数据
• props使用：在创建函数时，在function fun(props)中传入参数props，通过props.属性调用---只读。
• state:通过从依赖‘react’中引入const [data,setData]UseState(),进行初始化页面状态，状态管理使用setData()。
• 变量：以{data}方式嵌入**...等方式。**
• 组件的使用：

【3】jsx:

false, null, undefined, and true 是合法的子元素。但它们并不会被渲染

const element = <div>element</div>; const element = React.createElement( 'h1', {className: 'greeting'}, 'Hello, world!' ); //state使用 this.setState(state => ({ clicks: state.count+ 1 })); this.setState((state) => { return {quantity: state.quantity + 1}; }); this.setState({},callback)//异步调用，替换上一个state中的属性 复制代码

3、组件生命周期和元素渲染

数据流单向自上而下，state位于局部，其他组件一般无法访问。

卸载 componentWillUnmount() 错误处理 static getDerivedStateFromError() componentDidCatch() 更新 shouldComponentUpdate(nextProps, nextState) forceUpdate() componentDidUpdate(prevProps) { if (this.props.userID !== prevProps.userID) { this.fetchData(this.props.userID); } } 初始化 constructor(props) componentDidMount 网络请求 static getDerivedStateFromError(error) { // 更新 state 使下一次渲染可以显降级 UI return { hasError: true }; } render

4、元素渲染

主要方式：diff算法

策略：组件算法、dom层级算法、element算法

虚拟节点Fragment：react提供，不会展示在dom树中

ReactDOM.createPortal ReactDOM.render() 在return中可以使用{this.state.属性 && <element />} {this.state.属性？<div>123</div: 1231}

5、this

在react组件中，this一般指向类本身或函数本身，不建议改变this指向，

传参：this绑定问题

map列表遍历，绑定key（在react中唯一辨别兄弟节点的值，和区别索引）

6、受控组件和非受控组件

受控组件：通过限制表单的输入或状态改变事件的入口，改变state来作用于dom的value

非受控组件，不限制输入输出、通过ref等获取dom值

7、context和prop-type

const MyContext = React.createContext(defaultValue); <MyContext.Provider value={/* 某个值 */}> 使用import PropTypes from 'prop-types';检查类型 App.propTypes = { children: PropTypes.element.isRequired };

8、react顶层api

cloneElement() isValidElement() React.Children createFactory() React.createRef React.forwardRef React.Fragment 。。。 React 支持的 DOM 属性有： accept acceptCharset accessKey action allowFullScreen alt async autoComplete autoFocus autoPlay capture cellPadding cellSpacing challenge charSet checked cite classID className colSpan cols content contentEditable contextMenu controls controlsList coords crossOrigin data dateTime default defer dir disabled download draggable encType form formAction formEncType formMethod formNoValidate formTarget frameBorder headers height hidden high href hrefLang htmlFor httpEquiv icon id inputMode integrity is keyParams keyType kind label lang list loop low manifest marginHeight marginWidth max maxLength media mediaGroup method min minLength multiple muted name noValidate nonce open optimum pattern placeholder poster preload profile radioGroup readOnly rel required reversed role rowSpan rows sandbox scope scoped scrolling seamless selected shape size sizes span spellCheck src srcDoc srcLang srcSet start step style summary tabIndex target title type useMap value width wmode wrap

9、hooks

useState useEffect(() => { document.title = `You clicked ${count} times`; }, [count]); // 仅在 count 更改时更新

useEffect 就是一个 Effect Hook，给函数组件增加了操作副作用的能力。它跟 class 组件中的 componentDidMount、componentDidUpdate 和 componentWillUnmount 具有相同的用途，只不过被合并成了一个 API。