Menqq的博客

我们大部分 React 类组件可以保存状态，而函数组件不能？ 并且类组件具有生命周期，而函数组件却不能？React 早期版本，类组件可以通过继承PureComponent来优化一些不必要的渲染，相对于函数组件，React 官网没有提供对应的方法来缓存函数组件以减少一些不必要的渲染，直接 16.6 出来的 React.memo函数。React 16.8 新出来的Hook可以让React 函数组件具有状态，并提供类似 componentDidMount和componentDidUpdate等生命周期方法。

vuex同步异步方式不一样，\view——>commit——>mutations——>state变化——>view变化（同步操作）view——>dispatch——>actions——>mutations——>state变化——>view变化（异步操作）redux的同步异步方式一样。view——>dispatch——>actions——>reducer——>state变化——>view变化（同步异步一样）vuex

Redux是什么很多人认为redux必须要结合React使用，其实并不是的，Redux 是 JavaScript 状态容器，只要你的项目中使用到了状态，并且状态十分复杂，那么你就可以使用Redux管理你的项目状态，它可以使用在react中，也可以使用中在Vue中，当然也适用其他的框架。1、为什么要使用redux?随着互联网的高速发展，我们的应用变得越来越复杂，进行导致我们的组件之间的关系也变得日趋复杂，往往需要将状态父组件 -> 子组件 -> 子子组件 -> 又或者只是简单的 父

转载阮一峰网络日志：http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_three_react-redux.htmlReact-Redux是一个单独的库，可以单独使用也可以配合React使用当随着时间变化有相当大量的数据，或者你觉得所有state放在最顶层组件中已经无法满足需要了，state需要有一个单一可靠的数据源时使用React-Redux 的用法更方便。安装包： npm install redux -SReact-Redux

安装包：react-router-dom

Vue与Reac都有lifecycle生命周期的概念,每个组件实例在被创建之前都要经过一系列的初始化过程。生命周期指组件从初始化开始到结束的过程 或生命周期是描述组件从开始到结束的过程，每个组件都具有生命周期，都对组件通过生命周期给予的钩子函数进行管理。钩子函数指系统某些状态和参数发生改变的时候，系统立马去通知对应处理的函数叫钩子函数Vue生命周期触发vue的created事件以后,this便指向vue实例 var mlistVue = new Vue({

react 生命周期分三种状态: 1. 初始化 2.更新 3.销毁初始化1、getDefaultProps()设置默认的props，也可以用ufaultProps设置组件的默认属性.2、getInitialState()在使用es6的class语法时是没有这个钩子函数的，可以直接在constructor中定义this.state。此时可以访问this.props3、componentWillMount()组件初始化时只调用，以后组件更新不调用，整个生命周期只调用一次，此时可以修改state

react 生命周期函数的用法及建议class ExampleComponent extends React.Component { // 用于初始化 state constructor() {} // 用于替换 `componentWillReceiveProps` ，该函数会在初始化和 `update` 时被调用 // 因为该函数是静态函数，所以取不到 `this` // 如果需要对比 `prevProps` 需要单独在 `state` 中维护 static getDerive

受控和非受控即表单元素的值是否与状态绑定受控=>与状态绑定非受控=>与状态不绑定非受控写法：

findDOMNode ReactDOM.findDOMNode(component)注意事项：只在已挂载的组件上可用（即，已经放置在DOM中的组件）findDOMNode不能用于函数组件

react事件理解对原生事件进行了封装仅仅监听了domcument的所有事件根据e.target判断真实触发事件的元素书写方式：驼峰式react事件的捕获类型在事件类型上加capture:onClickCapturereact事件内部的this箭头函数的this指向调用时的上一级（级组件实例）事件监听器的this会被处理成undefined绑定事件写法：方法一（写法和用法）：constructor(props){ super(props) this.te

react中组件之间的跨级传值：跨级传值，在react中用到的是它自己提供的一套api：React.createContext（通过这个api完成跨级传值）如下组件：<Provider/>外层 生产数据（数据的生产者）<Consumer/>内层 消费数据（数据的消费者）作用：方便祖先组件与后代组件（中间隔多少层组件都可以）传值，也就是通过React.createContext()创建一个Context对象，这个对象Context对象包含两个组件：<Pro

传入模板（children）在组建中间写要传入的虚拟dom在子组件中展示{this.props.children}示例代码：在components文件夹下创建Child3.js（给子组件传入一个模板）：父组件Index.js中：import React, { Component } from 'react'import Child1 from './components/Child1'import Child2 from './components/Child2'import Chil

子组件向父组件传值传值方法：在父组件中定义一个回调函数，在子组件中触发这个回调父组件传递一个函数子组件内部接收（props）并触发该函数达到其目的props不可被修改示例代码：父组件传递一个函数：现在要做的是，在子组件Child2.js中有一个button按钮，当我们点击这个按钮的时候，就回传一个值到父组件里面。首先在父组件里面定义一个回调函数：import React, { Component } from 'react'import Child1 from './compone

父组件传子组件父组件传值（通过自定义属性）：例如：在父组件index.js文件内引入并使用Child1子组件，模拟数据，把数据传到Child1里面：import React, { Component } from 'react'import Child1 from './components/Child1'// 父组件 父组件向子组件传值export default class One extends Component { state = { hello:

使用脚手架搭建开发环境（create-react-app）脚手架安装工具，两种方式：npm install create-react-app -g 下载全局的脚手架创建项目：creaete-create-app 项目名字npx create-react-app project（项目名字）这里用方法二：下载完后会生成project文件夹，目录结构如下：下一步，3. cd project 进入到project文件夹4. npm start 启动命令打开页面（网址迷认为：localhos

react中使用create-react-app命令创建一个项目，运行npm run eject（释放）命令暴露配置文件的时候出现了如下：NOTE: Create React App 2+ supports TypeScript, Sass, CSS Modules and more without ejecting: https://reactjs.org/blog/2018/10/01/create-react-app-v2.html? Are you sure you want to eject