react生命周期

有时百感交集，却又百口模辩，那些很远的事，仿佛就在昨天 React生命周期 React_生命周期_constructor 初始化 constructor: 1、当前生命周期函数的作用是用来做初始化工作的 this的身上是没有props的如果必须使用通过super身上的参数 在调用当前函数的时候必须在内部调用super,否则this的指向会发生错误 2、 当前生命周期函数可以用来定义当前组件所需要用到的一些状态值 3、 在constructor中如果需要使用props的时候需要在super中继承过来 React_生命周期_componentDidMount 挂载后 当前生命周期函数我们可以通过ref来获取真实的DOM结构(两种写法请查看ref那一页) 一般情况下我们都会在当前生命周期函数中做ajax数据的请求 为什么要在这里做?不在挂载前做 因为挂载前在17.0中被废除了如果不被废除也可以做数据请求 一般在客户端的时候会在挂载后做数据渲染主要也是为了防止挂载前进行阻塞导致页面渲染白屏 因为ajax是异步的 React_生命周期_componentWillMount 挂载前、(可以做后端渲染) componentWillMount:挂载前(传来的值在这里使用)只执行一次 1、当前生命周期函数可以用来接受外部的数据，将外部的数据转换成内部的数据

React声明周期 React组件的生命周期可以分为挂载，渲染，卸载几个阶段。 组件挂载时： class App extends Component { static propTypes = { // ... } ; static defaultProps = { // ... } ; constructor ( props ) { super ( props ) ; this . state = { // ... } ; } componentWillMount ( ) { // ... } componentDidMount ( ) { // ... } render ( ) { return < div > This is a demo . < / div > ; } } propTypes和defaultProps分别代表props的类型检查和默认类型。这两个属性被声明成静态属性，意味着从类外面也可以访问他们。 例如App.propTypes, App.defaultProps 声明周期 componentWillMount 会在 render 之前执行， componentDidMount 在 render 之后执行。 componentWillMount componentDidMount 都只在组件初始化时运行一次。 组件卸载时

React Native中的component跟Android中的activity，fragment等一样，存在生命周期，下面先给出component的生命周期图 getDefaultProps object getDefaultProps() 执行过一次后，被创建的类会有缓存，映射的值会存在 this.props ,前提是这个prop不是父组件指定的 这个方法在对象被创建之前执行，因此不能在方法内调用 this.props ，另外，注意任何 getDefaultProps() 返回的对象在实例中共享，不是复制 getInitialState object getInitialState() 控件加载之前执行，返回值会被用于state的初始化值 componentWillMount void componentWillMount() 执行一次，在初始化 render 之前执行，如果在这个方法内调用 setState ， render() 知道state发生变化，并且只执行一次 render ReactElement render() render的时候会调用 render() 会被调用 调用 render() 方法时，首先检查 this.props 和 this.state 返回一个子元素，子元素可以是DOM组件或者其他自定义复合控件的虚拟实现

工作中发现在使用React组件时会出现先后顺序的问题，也就是在一个组件的整个生命周期中，通过用户的交互来更新state或者props，重新渲染组件，更新页面的ui。组成一个简单的“状态机”。 react的生命周期三个阶段： Mounting 挂载 1、 constructor()构造方法 constructor是ES6对类的默认方法，通过 new命令生成对象实例时自动调用该方法。初始化执行一次。 使用constructor必须手动调用super方法。需要调用this.props必须传入props 。比如 class ClassName extends React . Component { constructor ( props ) { super ( props ) ; // 必须调用super方法 console . log ( this . props ) ; // 这里可以拿到this.props的值 this . state = { } ; // 在constructor中可以初始化state this . state = { color : props . color } ; // !这种操作是错误的，应该避免，任何对state的操作除了初始化都要使用setState方法 this . setState ( { color : props . color } ) ; /

本人于7-8月开始准备面试，过五关斩六将，最终抱得网易归，深深感受到高级前端面试的套路。以下是自己整理的面试题汇总，不敢藏私，统统贡献出来。 面试的公司分别是：阿里、网易、滴滴、今日头条、有赞、挖财、沪江、饿了么、携程、喜马拉雅、兑吧、微医、寺库、宝宝树、海康威视、蘑菇街、酷家乐、百分点和海风教育。 以下是面试题汇总，前端进阶系列会持续深入更新面试题解，共勉！ 阿里 使用过的koa2中间件 koa-body原理 介绍自己写过的中间件 有没有涉及到Cluster 介绍pm2 master挂了的话pm2怎么处理 如何和MySQL进行通信 React声明周期及自己的理解 如何配置React-Router 路由的动态加载模块 服务端渲染SSR 介绍路由的history 介绍Redux数据流的流程 Redux如何实现多个组件之间的通信，多个组件使用相同状态如何进行管理 多个组件之间如何拆分各自的state，每块小的组件有自己的状态，它们之间还有一些公共的状态需要维护，如何思考这块 使用过的Redux中间件 如何解决跨域的问题 常见Http请求头 移动端适配1px的问题 介绍flex布局 其他css方式设置垂直居中 居中为什么要使用transform（为什么不使用marginLeft/Top） 使用过webpack里面哪些plugin和loader webpack里面的插件是怎么实现的 dev

react-intl：做国际化的 react只是dom的一个抽象层，并不是web应用的完整解决方案。它没涉及到代码结构和组件之间的通信 react components的生命周期，在浏览器中的三个状态： 　　 Mounted（React.renderComponent()）: React components被render解析生成对应的DOM节点并被插入浏览器的DOM结构的一个过程。 　　 update(setState(),setProps()): 一个mounted的React Components被重新render的过程。重新渲染的过程并不是说相应的dom一定会发生变化， react会把这个component的当前state和最近一次的state进行对比。只有当state确实发生了改变，并且影响到了dom结构的时候，react才会去更新dom。 　　Unmounted: 一个mounted的react Components对应的DOM节点被从DOM结构中移除的这样一个过程。每一个状态react都封装了对应的hook（钩子）函数，在对特定的事件进行 1.原生HTMl元素名以小写字母开头，而自定义的React类名以大写字母开头，比如HelloMessage不能写成helloMessage.除此之外还需要注意组件类只能包含一个顶层标签，否则也会报错 react主要是view层

Vue： 一、MVVM模式与MVC模式的区别 MVVM即Model-View-ViewModel。 它是将“数据模型数据双向绑定”的思想作为核心，因此在View和Model之间没有联系，通过ViewModel进行交互，而且Model和ViewModel之间的交互是双向的，因此视图的数据的变化会同时修改数据源，而数据源数据的变化也会立即反应到View上。 Vue是以数据为驱动的，Vue自身将DOM和数据进行绑定，一旦创建绑定，DOM和数据将保持同步，每当数据发生变化，DOM会跟着变化。 ViewModel是Vue的核心，它是Vue的一个实例。Vue实例时作用域某个HTML元素上的，这个HTML元素可以是body，也可以是某个id所指代的元素。 DOM Listeners和Data Bindings是实现双向绑定的关键。DOM Listeners监听页面所有View层DOM元素的变化，当发生变化，Model层的数据随之变化；Data Bindings监听Model层的数据，当数据发生变化，View层的DOM元素随之变化。 MVC即Model-View-Controller MVC是比较直观的架构模式，用户操作->View（负责接收用户的输入操作）->Controller（业务逻辑处理）->Model（数据持久化）->View（将结果反馈给View）。 二、v-show与v-if的区别

原文: http://blog.gqylpy.com/gqy/427 置顶：来自一名75后老程序员的武林秘籍——必读 （博主推荐） 来，先呈上武林秘籍链接： http://blog.gqylpy.com/gqy/401/ 你好，我是一名极客！一个 75 后的老工程师！ 我将花两分钟，表述清楚我让你读这段文字的目的！ 如果你看过武侠小说，你可以把这个经历理解为，你失足落入一个山洞遇到了一位垂暮的老者！而这位老者打算传你一套武功秘籍！ 没错，我就是这个老者！ 干研发 20 多年了！我也年轻过，奋斗过！我会画原理图，会画 PCB，会模拟，会数字！玩过 PLC，玩过单片机，会用汇编，会用 C！玩过 ARM，比如 PLC，STM32，和时下正在起飞的 NXP RT1052！搞过 DSP，比如 TMS320F28335！搞过 FPGA，不管 Xilinx 还是 Altera，也不管是 Verilog 还是 VHDL，或者直接画数字电路图！我懂嵌入式系统，比如 uCOS 和 Linux！我懂开源的硬件，比如 Arduino 和树莓派!我也搞软件，学了一堆上位机的语言C#，JAVA，Python，Kotlin，Swift！会写爬虫工具，又自学写APP，不管Android 还是 IOS！ 可是这一切有什么用呢？土鸡瓦狗！不值一提！干技术的永远就是最苦逼的那个人！ 我相信看到这里的你，应该是个 IT

生命周期 以下均为生命周期钩子函数 componentWillMount 在组件将要被挂载前调用 componentDidMount 在组件被挂载之后立即调用 shouldComponentUpdate 组件是否被更新，如果返回true则更新，否则不更新 componentWillUpdate 组件将要被更新前调用 componentDidUpdate 组件被更新后立即调用 componentWillUnmount 在组件将要被卸载时调用 来源： https://blog.csdn.net/weixin_42566993/article/details/100055953

交互与实例的生命周期 交互基本概念 1. 交互的应用场景（什么时候用到前后端交互） 从后端获取一些数据，将其进行展示或计算 将用户在页面中提交的数据发送给后端 2. Vue请求数据交互 vue请求数据有Vue-resource、Axios、fetch三种方式。Vue-resource是Vue官方提供的插件，axios与fetch是第三方插件 Vue.js resource交互 Vue自身不带处理HTTP请求 如果想使用HTTP请求必须要引入 vue-resource.js 库它可以通过XMLHttpRequest发起请求并处理响应。也就是说，$.ajax能做的事情，vue-resource插件一样也能做到，而且vue-resource的API更为简洁。 Vue.js 交互借助于 $http 完成,下载：npm install --save vue-resource get 类型 语法： this.$http.get("http://localhost:3000/get",{params:{uname:"王大锤"}}).then( (ok)=>{ console.log(ok); }, (err)=>{ console.log(err); } ) post类型 语法： this.$http.get("http://localhost:3000/post",{uname:"王大锤"},