react基础学习记录一

URLOS 发布于2019-08-26 12:24 / 2451人阅读

摘要：虚拟的构建在组件渲染到网页前会执行一个这个函数必须和一起使用该函数在组件更新完后会自动执行，第三个参数是的返回值阶段发生在组件的删除前，会自动执行，我们常用于清除组件之前被添加的还会继续执行的东西。

react 学习记录

自己学习，记录便于后面回顾

基础知识点的记忆：

state与props

state是组件自己的数据，而props是父组件通过属性赋值方式将其传送给组件；这样达到了，父子组件数据的联通

state的赋值方式，推荐用函数式赋值

this.setState(() => ({
    react: "i like"
}))

setState是一个异步函数，并且多次setSate，会将其放入队列中，合并成一次进行执行

正因为是异步的函数，所以当我们改变后不能在同步的代码中直接获取，有两种方式可以解决

constructor() {
    this.state = {
        react: ""
    }
}
this.setState((preState) => ({
    react: "i very like"
}))
this.setState((preState) => ({                   //
    react: preState.react + "我很喜欢react"
}))
this.state.react   //不会变化，是空
this.setState((preState) => ({
    react: preState.react + "我很喜欢react"
}), () => {
    console.log(this.state.react)              //这边回调的this指向组件自身，而且获取到最新的state
})

上面setState函数中有两个参数，第一个参数是一个函数，会自动将最近修改的最新的state，传入进来；第二个参数是一个也是函数，this指向组件自身；两个函数的执行都是异步的，因为setState就是一个异步函数

而子组件怎么想父组件传送数据呢？这通过父组件先子组件赋值方法，子组件通过调用父组件的方法，来达到将其数据返回给父组件，所以最终props的数据还是在父组件的方法中

组件的显示是有什么决定的，就是render，return的结果，return结果中有用到jsx对象，则需要引入import React from "react"

return中的jsx组件只能被一个div包裹，组件不能并列；但可以通过来占位，优点是其不会显示在dom节点中

怎么不转译html形式的文本,dangerouslySetInnerHTML = {{ __html: xxx}};第一层{}是说明里面要填写js语句，第二层则是说明写的是一个对象，整句话的意思就是innerHTML=XXX

生命周期函数

什么事生命周期函数：就是说在某个阶段会自动执行的函数，叫做生命周期函数；

Mounting阶段

constructor:用于初始化state，一个组件只执行一次

 static getDerivedStateFromProps(props, state);需要返回一个对象或者null，不能返回undefined；该函数的作用是可以用父组件传进来的props的值在render之前进行修改；该函数在state修改update的时候也会执行

render函数，不是Component内置的函数，所以这个生命函数必须要写；用于创建虚拟dom，即js对象

componentDidMount;在组件挂载完后进行的操作，只执行一次，就在挂载的最后阶段；一般在这个阶段进行ajax请求；在这个阶段修改了state的值，上面的两个函数render和getDerivedStateFromProps也会在再次执行

updating阶段
就是当组件的state发生改变的时候会再次执行一些生命周期函数
会先执行getDerivedStateFromProps；接着shouldComponentUpdate(nextProps, nextState)，参数是最新的数据nextState和nextProps，可以和之前的this.state,this.props进行操作比较询问是否允许进行更新返回一个布尔值，false则不需更新，后面的生命周期函数不会再自动执行这个false常用来提升性能，因为父组件更新state时，子组件的render函数也会被执行，我们返回false，就不会执行没必要的子组件的render，提高了性能，返会true则，会进行下一个函数render。虚拟dom的构建；在组件渲染到网页前会执行一个getSnapshotBeforeUpdate(prevProps, prevState)这个函数必须和componentDidUpdate(prevProps, prevState, snapshot)一起使用;该函数在组件更新完后会自动执行，第三个参数是getSnapshotBeforeUpdate的返回值

Unmounting阶段
发生在组件的删除前，会自动执行，我们常用于清除组件之前被添加的还会继续执行的东西。例如定时器

虚拟dom

只理解了一些简单的概念：虚拟dom就是js对象，是替代真实dom，让js更加高效的进行操作；
state发生update后render函数会生成新的虚拟dom，来和之前之前老的虚拟dom进行比较：
主要采取几种策略：

同层比较，说白话就是从大头才是比较，大头坏了整个不要了，重新创建；这种方法再第一层不同，后面都相同的情况下，会带来性能的降低，因为它会重新渲染创建；但是提高的算法的速度，很简单就一层一层的比较，不用循环递归；放弃了一些极端情况，带来了算法上的提高

key值的对组件标识，通过标识来观察新旧组件，是否一致，缺少了或增加了一目了然

idc机房托管私有云最后一条记录 a记录一域名 asp删除一条记录 cn域名的ns记录一

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

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

React Router 学习手册(基础篇)

摘要：该手册是基于和使用教程学习编写而成，可能会有描述不够清楚的地方，大家可自行参考原文，为提供了一个完整的路由库，它允许你通过的变化来控制组件的切换与变化有关全家桶的其余相关文章，可以查看以下链接，会持续更新别眨眼看安装使用进行安装之后该手册是基于react-router 和 React Router 使用教程学习编写而成，可能会有描述不够清楚的地方，大家可自行参考原文， React ...

DobbyKim 2019-08-22 10:40 评论0 收藏0
React项目服务端部署过程记录（create-react-app）

摘要：但在完成最后部署上线是遇到一些小问题，由于搜索无果，便记录于此。由于是自己的项目，自己的云服务器。由于之前部署项目时也碰到过这种类似的问题，当时是通过修改配置解决的。 1.前言说在最最前这次分享比较啰嗦啦，想说的很多。实际问题的解决是 2-3.恍然大悟部分，可以直接跳过其他多余的絮叨哦～最近入职新公司由于前端主要是react，遂开始去学习了解react，这两天跟着电子书《The...

spademan 2019-08-22 15:22 评论0 收藏0
深入理解js

摘要：详解十大常用设计模式力荐深度好文深入理解大设计模式收集各种疑难杂症的问题集锦关于，工作和学习过程中遇到过许多问题，也解答过许多别人的问题。介绍了的内存管理。延迟加载 (Lazyload) 三种实现方式延迟加载也称为惰性加载，即在长网页中延迟加载图像。用户滚动到它们之前，视口外的图像不会加载。本文详细介绍了三种延迟加载的实现方式。详解 Javascript十大常用设计模式力荐~ ...

caikeal 2019-08-26 11:39 评论0 收藏0
记录一下自己的春招，唯品会、360、京东offer已收、腾讯offer_call已达！！！

摘要：春招结果五月份了，春招已经接近尾声，因为到了周五晚上刚好有空，所以简单地记录一下自己的春招过程。我的春招从二月初一直持续到四月底，截止今天，已经斩获唯品会电商前端研发部大数据与威胁分析事业部京东精锐暑假实习生的腾讯的是早上打过来的。春招结果五月份了，春招已经接近尾声，因为到了周五晚上刚好有空，所以简单地记录一下自己的春招过程。我的春招从二月初一直持续到四月底，截止今天，已经斩获唯品...

freewolf 2019-08-22 16:57 评论0 收藏1
react-redux 开发实践与学习分享

摘要：简介是一个状态管理的库，由基础上开发出来，与的主要区别是只有一个，关于，后文会详述。这个函数接受四个参数，它们分别是，，和。之前在注册页面，如果没有满足相关条件，则触发的行为。具体定义了项目中触发的行为类别，通过属性来区别于不同的行为。 redux简介 redux是一个js状态管理的库，由flux基础上开发出来，与flux的主要区别是只有一个store，关于store，后文会详述。在各...

imccl 2019-08-21 16:42 评论0 收藏0