react学习

 

1.react是Facebook公司开发的最初用于ins的网站搭建

2.库和框架的概念

库：小而巧  只提供了特定API 能够很方便的从一个库换到另外一个库  代码几乎不会改变

框架：大而全  框架提供了一整套的解决方案，因此切换到其余的框架比较困难

3.模块化和组件化及其优势

模块化：从代码出发分析  把一些可复用的代码 抽离为单个的模块，便于项目的维护和开发

组件化：从ui出发分析   把一些可复用的ui界面 抽离为单独的组件   （随着项目的开发，组件积累的愈来愈多，很方便就能把现有的组件拼接成完整的页面）

vue如何实现组件化  经过.vue文件建立对应的组件    分红三部分 template （结构）  script（行为） style（样式） 缺一不可

react如何实现组件化   react中有组件化的概念 可是没有像vue同样这样的组件模版文件  一切都已js来表现

移动开发方向

vue结合weex技术 能够迁移到移动端   weex技术阿里本身系列软件在用

react 结合react native 能够无缝迁移到移动端   大公司用的多

4.react的核心概念

(1).虚拟dom

    dom的本质  浏览器的概念 用js对象表示页面上的元素，浏览器提供了操做dom对象的API

    react中的虚拟dom   框架中的概念 是程序员用js对象来模拟 页面上的dom和dom嵌套

    为何要实现虚拟dom   为了实现页面中dom元素的高效更新

    dom树的概念  （一个页面呈现的过程）浏览器请求服务器获取页面html代码 -> 浏览器要先在内存中，解析dom结构，并在浏览器内存中渲染出一棵dom树 ->浏览器把dom树渲染在页面上

    如何把性能最优  ->按需更新  如何按需更新  ->获取内存中的新旧两棵dom树进行对比，获得须要修改的dom元素  如何获取dom树 -> 浏览器并未提供获取dom树的api ->程序员手动模拟dom                   树 如何模拟dom树 ->对象与数组结合 var tree = {

                                                                                   tagName:'div',

                                                                                   childrens:[{tagName:'p'},'lalala']

                                                                                   }

          程序员用js对象的方式手动模拟dom树和嵌套关系 就是虚拟dom   目的：使页面高效更新

(2).diff算法（different）

tree diff   新旧两颗dom树逐层对比的过程，当整棵树逐层对比结束，则全部须要按需更新的元素都能被找到

component diff  在进行tree diff的时候，每一层中组件级别的对比

                       若对比先后，组件类型相同，则暂时认为此组件不须要被更新

                       若对比先后，组件的类型不一样，则须要移除旧组件，建立新组件，并追加到页面上

element diff     在进行组件对比的时候若出现组件相同，则须要进行元素级别的对比。

5.问题记录  

在使用react时 初始建立react项目用npm install -g create-react-app   报错  错误信息为 Error: EACCES  即没有权限  此时在指令前加sudo便可执行

6.前端思想pwa  progressive web application 

之前端的方式写手机app  react中的体现  在index.js中有 import registerServerWorker from './ registerServerWorker'   引入以后用户第一次打开页面需联网 以后若在无网络环境下打开也会显示联网时的页面

manifest.json是在使用pwa时  对首次页面的缓存  能够在该页面设置快捷方式的图标和网址 颜色等

7.使用react的步骤

sudo npm install -g create-react-app  -> cd Desktop  -> create-react-app +文件名 -> cd 文件名 -> npm start  就会打开新建的页面  每次调试  npm run start

8.在app.js中  import React, { Component } from 'react';   去掉,{}中的东西  等同于class App extends React.Component这种写法

  render函数返回什么  页面显示什么  在用export default +类名 返回出去

9.ES6 解构赋值  ？？？

10.jsx语法须要引入react

11.jsx语法 

（1）.直接在js文件中写入标签 无需引号

（2）.能够将自定义的组件以标签形式引入  注意首字母必须大写

（3）.jsx语法规定 函数返回的标签群必须被包裹在一个标签中

（4）.react16提供了Fragment标签 解决既知足（3）又不想在页面中显示最外层标签的方法

（5）.jsx中的变量要用{}包裹

（6）.jsx如何写注释 {//或者／**／}  是开发时注释

12.constructor(props）为类的构造函数 默认有个props参数  在其中执行super（props）  即执行父类的构造函数  构造函数中this.state能够存放数据

13.事件绑定时须要经过bind(this)改变this指向  state中提供setxxx用来改变state中的值  以传入对象的形式

14.map???

15.ES6展开运算符

[...this.state.list,xxx]  意味将以前的数组内容拿过来

16.react作循环时，须要在每一个循环中加入key值 不加不报错 但警告

17.immutable  ->即state不容许咱们作任何修改 若想修改就拷贝个副本  否则以后的性能优化会出现问题

18.jsx 中写class名时推荐写成className 由于在该语法下默认class为类

19.若想达成在input输入框中加入标签在页面中显示的话，在你想出现的标签上写  属性dangerouslySetInnerHTML = {{__html:item}}  可是可能会被注入攻击

20.父组件以属性的方式传给子组件数据  子组件以this.props.xxx的形式接收

     子组件以父组件传递过来的方法传递数据给父组件

21.react代码优化

先引入组件 在引入样式 

bind（this）的时候能够拿到顶端写 提升性能 

新版react对setState 进行修改  以前是对象的形式  新版是函数形式 返回对象  即this.setState(()=>{

return {inputValue:e.target.value}})   但会报错 报错缘由是写成了函数就会出现异步操做 因此要在函数上面用常量保存时间的相关参数

22.ES6return的简写是括号

23.setState()能够接收个参数是prevState  表示上一个state 等同于this.state 

24.react的特色

    声名式开发   （只操做数据）

    能够与其余框架共存

    组件化开发   （组件开头字母 要大写）

    单向数据流   （只能父组件向子组件传值，子组件不能改变父组件传过来的值）

    视图层框架   （只处理数据和页面渲染，其余复杂组件间的传值要借助其余框架）

    函数式编程   （对前端自动化测试带来方便）    

25.切换node版本

     npm install -g n

     n 版本号

26.action   

 

是行为的抽象

是普通js对象

通常由方法是生成

必须有一个type （惟一的）

27.store = reducer + state

 

 

  reducer里有createstore  会生成store

28.

 

29.总结一下：redux的设计思想简单的说；
第一步：action :无论三七二之一；模拟出事件；

第二步：reducer:  开发中天然有多个reducer;
新建一个reducer文件只作一件事；吧多个reducer合并成一个reducer.
使用combineReducers方法来将多个reducer合并成一个；每一个reducer会生成一个新的state;将多个reducer合并成一个reducer;那也就等同于将多个小的state合并成一个大的state对象；

第三步： const store = createStore(reducers); 将state交给store管理；

第四步：action返回一个对象；这个对象交给store管理；其中reducer也是store来管理的；每次触发一个action;就会执行全部的reducer;

能够认为以上种种都是为了容器组件服务的；在containers里面计算获得state和返回的action纯对象；这样将action对象和state合并为容器组件的props;继而将props合并到UI组件中去！！

第五步：容器组件中connect方法的参数mapStateToProps方法能够获得全部的reducer对应的state从中获取指定值而后合并为组件的props;

mapDispatchToProps方法能够返回须要用的纯对象(action);方法会自动将这个对象合并到组件的props中。 

30.propTypes   子组件对父组件传递过来的数据类型进行强校验

 先引入prop-types包   import  PropTypes from "prop-types"

再在子组件写入  TodoItem.propTypes = {

                              content: PropTypes.string ，    注意大小写

                               deleteItem: PropTypes.func,

                              index:propTypes.number.isRequired     他的断定还有许多 好比既能够是数字也能够是字符串就写成:PropTypes.oneOfType([PropTypes.number,PropTypes.string])    能够看一下官方文档不写require的时候 若是父组件没传递index的值的话程序也不会报错 可是加了以后若是不传index的值的话就会报错   这时就能够给index一个默认值              TodoItem.defauliProps = {

                                   index:3

                              }                      

31.Props,State,Render函数

当组件的state或props发生改变，render函数就会从新执行

当父组件的render 函数被从新执行时  子组件也会被从新执行  

32.dom即documentfragment文档碎片

    <div class="abc"><span>hello world</span></div>

    虚拟dom就是js对象用来模拟真是dom["div",{id:"abc"},["span",{},"hello worid"]]

    js建立一个真实dom对象代价极高 要调用webapplication级别的API 很消耗性能

33.在react底层中，先生成虚拟dom,而后再根据虚拟dom生成真实dom

jsx -> createElement -> 虚拟dom (js对象) ->真实dom

因此运用jsx只是让咱们在开发的时候方便一点 运用偏向底层的React.createElement({})也能够达成目的

34.虚拟dom的优势

提高性能

能够跨域

35.setState是异步函数 为了提高性能

36.react的虚拟dom是同层比对  若该层不同就舍弃下面的层从新渲染

37.key值最好不是k的缘由是k不稳定 因此对于比对的话很差  提升性能

38.react中的ref的使用

dom元素的引用  以前的e.target能拿到dom元素  如今

<input type="text" ref = {(input)=>{this.input = input}}/>也能够

可是不推荐使用 由于react是数据驱动 且setState是异步函数 若写在里面容易出现问题

但setState提供了一个回调函数 想setState执行完在处理的部分代码能够写在回调箭头函数里,()=>{}

39.react的声明周期函数

声明周期函数：指在某一时刻组件会自动调用执行的函数（如render ,constructor也能够理解为该函数，但不是react独有的，因此暂不归为）

componentWillMount在页面即将被挂载的时候自动执行即在render以前

componentDidMount在页面被挂载以后自动执行  而什么是挂载呢 是组件第一次执行的时候

shouldComponentUpdate在组件即将被更新的时候自动执行 要求返回一个boolearn值 决定组件是否更新

componentWillUpdate  在should。。。返回true时自动执行

componentDidUpdate  在render执行以后被自动执行

componentWillReceiveProps  没有接收props时不会执行  当一个组件从父组件接受了参数，只要父组件的render函数被从新执行了，该函数就会执行

componentWillUnmount   组件即将被移除的时候被执行

初始化  -> 挂载 -> 更新 -> 移除    每一个组件都有的生命周期函数

40.生命周期函数的使用场景

(1).render函数的性能优化

  正常状况下父组件的render函数执行就会带着子组件的render函数一块儿执行 但有时是不必而且损耗性能的 这时能够经过钩子函数来避免

其余的react的性能优化

setState异步

虚拟dom 同层比较 key值

(2). ajax的请求

不能写在render里，由于render屡次执行 

因此写在componentDidMount里

react没有ajax的内置功能，因此用第三方模块

如 axios  npm add axios

import axios from 'axios'

axios.get("请求的地址")

.then(()=>{alert("xxx")})

.catch(()=>{alert('error')})

41.ajax接口数据模拟

Charles能够抓取浏览器发出的请求 而且路由到你想要的地方  即中间的代理服务器

42.react的css过渡效果

transition：all 1s ease-in;

43.react的css动画效果

@keyframes 

定义动画效果 👆

使用动画效果 👇

加了forward以后动画会固定在最后一帧 否则会回到初始状态

44.react-transition-group模块实现动画效果

npm install react-transition-group --save 引入

import { CSSTransition } from 'react-transition-group'

提供不少钩子函数   具体可在GitHub上搜索看具体

 

TransitionGroup 配合 CSSTransition能实现成组动画效果