React学习笔记

taoszu 发布于2019-08-23 15:59 / 2032人阅读

摘要：单向数据流数据一旦更新，会渲染整个。的渲染方式用户输入从获取数据将数据传给顶层组件将每个组件渲染出来由于是单向数据流，所以不会有双向数据绑定数据模型的脏检查确切的操作。

你觉得你用的react框架有什么特点呢？

1)使用jsx语法，可以在js中写html。
2)单向数据流：数据一旦更新，会渲染整个app。
react的渲染方式：
用户输入
从API获取数据
将数据传给顶层组件
React将每个组件渲染出来
由于是单向数据流，所以不会有双向数据绑定、数据模型的脏检查、确切的DOM操作。

react组件

可以接受参数、可复用、可以传递、返回结果(渲染组件)

react高阶组件

高阶组件就是实现组件的复用，接收一个组件返回一个新的组件。

虚拟DOM树

javascript虽然快，但是操作DOM却非常慢。

react的生命周期

安装：创建组件的实例将其插入DOM时，将按以下顺序调用这些方法：
constructor()
static getDerivedStateFromProps()
render()
componentDidMount()
更新：props or state的更改可能导致更新。重新呈现组件时，将按以下顺序调用这些方法：
static getDerivedStateFromProps()
shouldComponentUpdate()
render()
getSnapshotBeforeUpdate()
componentDidUpdate()
卸载：从DOM中删除组件时调用此方法。
componentWillUnmount()

setState是异步的还是同步的
异步

setState是如何实现的？
调用setState更新this.state不是马上生效的，是异步。
然后之后会发生什么？
会执行更新阶段的life circle hooks，调用render函数的过程中会执行diff算法。
Vdom
为什么需要vdom?
虚拟dom就是结构树和 dom 的结构一样的对象。
用虚拟dom配合diff算法找出需要更新的部分，避免额外更新dom的开销。
Diff算法的原理

海外云主机云服务器学习笔记学习笔记一基础学习笔记深度学习笔记

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/102623.html

React 入门学习笔记整理目录

摘要：入门学习笔记整理一搭建环境入门学习笔记整理二简介与语法入门学习笔记整理三组件入门学习笔记整理四事件入门学习笔记整理五入门学习笔记整理六组件通信入门学习笔记整理七生命周期入门学习笔记整理八入门学习笔记整理九路由React 入门学习笔记整理（一）——搭建环境 React 入门学习笔记整理（二）—— JSX简介与语法 React 入门学习笔记整理（三）—— 组件 React 入门学习笔记整理（...

daryl 2019-04-23 11:57 评论0 收藏0
react入门学习笔记（一）

摘要：选择的主要原因大概是因为该框架出现较早，感觉上会相对成熟，日后学习中遇到问题想要查找答案相对简单一些，对，就是这么简单。多说无益，接下来开始的学习，我按照我学习中带着的问题来一一解答，完成我的入门笔记。主要是针对前端的组件化开发。这两天得空，特意来折腾了以下时下火热的前端框架react，至于为什么选react,作为一个初学者react和vue在技术上的优劣我无权评论，也就不妄加评论了...

leon 2019-08-20 18:01 评论0 收藏0
React学习笔记3：用es2015（ES6）重写CommentBox

摘要：新搭建的个人博客，本文地址学习笔记用重写在一开始的时候配置中我们就加入了的支持，就是下面的配置，但之前的学习笔记都使用的完成，所以专门作一篇笔记，记录使用完成创建相关文件修改，增加该入口文件修改，引入该文件做个简单的测试，看下浏览器全部用来新搭建的个人博客，本文地址：React学习笔记3：用es2015（ES6）重写CommentBox在一开始的时候webpack配置中我们就加入了e...

selfimpr 2019-08-19 17:30 评论0 收藏0
React学习笔记—Why React?

摘要：官方说法注本人英语二十六级是和用来创建用户界面的库。很多人将认为是中的。怎么说呢现在的自己就是个跟风狗啊，什么流行先学习了再说，再看看能不能应用在具体项目上。暂时先停下的学习，坐等。不过学习的脚步还是跟不上潮流的发展速度啊。 Why React? 官方说法注：本人英语二十六级 React是Facebook和Instagram用来创建用户界面的JavaScript库。很多...

余学文 2019-08-21 10:28 评论0 收藏0
《深入react技术栈》学习笔记（一）初入React世界

摘要：前言以深入学习技术栈为线索，记录下学习的重要知识内容。要传入时，必须使用属性表达式。如果要使用自定义属性，要使用前缀这与标准是一致的。前言以《深入学习react技术栈》为线索，记录下学习React的重要知识内容。本系列文章没有涵盖全部的react知识内容，只是记录下了学习之路上的重要知识点，一方面是自己的总结，同时拿出来和在学习react的人们一块分享，共同进步。正文一：rea...

verano 2019-08-20 14:47 评论0 收藏0
React学习笔记1：环境搭建

摘要：新搭建的个人博客，本文地址学习笔记环境搭建本文的书写环境为，之后会补充下的差异创建学习目录初始化项目根据相关提示完善信息，入口文件安装相关包，并且使用也就是支持，需要包，因为我之前做个一些相关项目，所以部分包已经全局安装，比如等等，大家新搭建的个人博客，本文地址：React学习笔记1：环境搭建本文的书写环境为mac，之后会补充windows下的差异 1、创建学习目录 mkdir l...

Sourcelink 2019-08-19 17:26 评论0 收藏0