蜗牛~~

相对比vue的生命周期，react显得复杂的多，光从名称上就比vue长，所以做好准备，不要放弃，坚持就是胜利、

这是因为在每次染时会创建一个新的函数实例，所以 React 清空旧的 ref 并且设置新的。而Vue中的ref可能比较简单（直接this.$refs.xxx就可以），这一篇主要讲一下如何在React中使用ref，以及使用ref的场景。不管在Vue中还是React，如果我们想使用一个元素的DOM，不需要通过JS中操纵DOM的方法，它们提供了一个专属的API就是ref。Refs 通常在 React 组件的构造函数中定义，或者作为函数组件顶层的变量定义，然后附加到 render() 函数中的元素。

（这种情况几乎不存在，在构造器中我们可以直接访问props而不是this.props，因此在实际开发中构造器就是能省略就省略，作用不大）应该加上花括号，react才会去读取花括号里面的东西（还记得vue里面吗，vue是在变量名加上冒号，代表读取变量，如。构造器是否接收props，是否传递给super，取决于：是否希望在构造器中通过this访问props。学过了vue的props属性，那react中的props属性如何使用呢？如果属性特别多，我们通过上面的方式传递十分繁琐，那如何批量传递呢？

重点是这一句：this.testFunc = this.testFunc.bind(this) 代表的含义就是，将原型上的testFunc函数通过bind改变this指向（使其指向index组件实例）返回一个新的函数重新赋值给testFunc函数，这样testFunc函数的this指向就正常了、那构造器的this以及render中的this均指向index组件实例，怎么就函数的this出现了undefined？2、组件是用类定义的，随后new出来该类的实例，并通过该实例调用到原型上的render方法。

JSX的定义全称: JavaScript XMLreact 定义的一种类似于 XML的JS 扩展语法:JS +XML本质是 React.createElement(component,props,...children)方法的语法糖，作用:用来简化创建虚拟 DOM

方式（2）：使用less，给每个组件都定义一个总的class名，然后嵌套编写样式即可，当然实际开发中还是第二种方式用的多，第一种相对繁琐。问题6：我们可以看到在app.js文件中引入组件的时候比较麻烦，重复的名称较多，如何处理？保存看下效果，我们看到两个组件的背景色变成一致了，优先使用的后引入的 class名称的样式。后缀名，可以直接将组件的js文件后缀名改为jsx，当然引入的时候js和jsx后缀都可以省略。此时引入的时候就可以省略index，简洁了很多、命名，将组件js文件的首字母大写，代表组件js。

我们在编写react的代码时，用到jsx语法，在js文件中输入html标签无法自动提示补全，很不方便，因此我们通过下文去解决该问题，提升开发效率。一、快速打开vscode中的settings.json。可以看到，此时再输入标签就有提示了~2、直接打开右上角的小图标即可。二、加入这行代码，保存即可。

其实就是当我们想要编写移动端的时候，如果使用专门开发android或者ios的人员去开发，代价及技术成本相对较高，因此我们会使用应用加壳技术来实现，通过编写移动端html网页，然后编写完之后套一个壳最终打包为apk文件，当我们在手机上安装之后，其实打开时是我们的壳，里面嵌套的是html网页。这样就极大节省了人力，提升了开发效率也能达到同样的效果。因此manifest.json就是为了配置加壳后的apk应用的名字、权限、图标以及访问应用设备权限。了解了react脚手架及项目结构后，就进入正式的学习啦~

react是用于构建用户界面的JS库，是一个将数据渲染为HTML视图的开源JS库。用于构建 Web 和原生交互界面的库。由Facebook开发，且开源。中文官网 React。

ajax的封装：import $ from 'jquery'function ajax(url,params,callback){ $.ajax({ type:"get", url:url, data:params, async:true, dataType:'json', succe...

每一个组件css命名如下：Home.module.css----就是给每个组件的命名之间加一个module组件内内部导入css文件，如下：import home from './Home.module.css'不能还像之前那种的导入方式：import './Home.css'需要将整个css给到home对象上然后dom使用方法如下：<div className={...

1、react发展－－－facebook在构建instagram网站的时候遇见两个问题 1、数据绑定的时候，大量操作真实dom，性能成本太高 2、网站的数据流向太混乱，不好控制于是facebook起初调研过市场上已存的mvc框架，发现都不太满意，于是就推陈出新，开发了react框架，并在2013年五月份开源React 把用户界面抽象成一个个组件，如按钮组件 Button、对话框组件 Di...

一、组件的定义1、通过函数function定义一个组件function HelloMessage(props) { return <h1>Hello World!</h1>;}2、通过class定义一个组件方式一：class Welcome extends React.Component { render() { return ...

React 把组件看成是一个状态机（State Machines）。通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面（不要操作 DOM）。以下实例创建一个名称扩展为 React.Component 的 ES6 类，在 render() 方法中使用 this.state 来修改当前...

state 和 props 主要的区别在于props是不可变的，而 state 可以根据与用户交互来改变。这就是为什么有些容器组件需要定义 state 来更新和修改数据。 而子组件只能通过 props 来传递数据。class WebSite extends React.Component { constructor() { super(); this.st...

当我们使用map遍历一个数组时，我们可以将该实例重构成一个组件，组件接收数组参数，每个列表元素分配一个 key，不然会出现警告，a key should be provided for list items，意思就是需要包含 key：function NumberList(props) { const numbers = props.numbers; const listItems...

redux与flux及vuex之间的区别：（1）redux与flux的区别redux与flux很像，主要区别在于flux有多个可以改变应用状态的store，它通过事件来触发这些变化，组件可以订阅这些时间来和当前状态同步。redux中没有分发器dispatcher，但在flux中dispatcher被用来传递数据到注册的回调事件，另一个不同的是flux中有很多扩展是可用的，这也带来了一些...

Umi是阿里的一个企业级的react开发框架，可以实现零配置的方式进行react项目开发。首先手动创建以下目录：UmiJS是需要一个固定的文件夹pages来存放页面的然后在pages里面建立一个index.js页面，用于测试在index.js中随便写点东西在主文件夹umi-app-demo下安装Umi然后进入src目录里面cd src在src目录下运行umi然后通过l...