Index.js是程序的入口文件

PWA progressive web application

(registerServiceWorker)

App.test.js自动化测试

定义组件：

class App extends React.component

Label：扩大点击区域

虚拟dom的生成

1.state数据

2.jsx模板3.数据+模板 生成虚拟dom（虚拟dom就是一个js对象，用它来描述真实dom 损耗了性能）

[‘div’,{id:’abc’},[‘span’,{},’hello’]]

4.用虚拟dom的结构生成真实的dom 来显示

    
     hello
    

5.state发生变化

6.数据+模板 生成新的虚拟dom（极大提升了性能）（数据更新）7.比较原始虚拟dom和新的虚拟dom的区别 找到区别（极大提升了性能）8.直接操作dom 改变span中的内容

优点：

1.性能提升2.使得跨端应用得以实现 react native

diff算法：

比对原始虚拟dom和新的虚拟dom之间的差异

提高了比对的性能同层比对 key值

Ref

setState是一个异步函数，console.log先于执行

setState({…},()=>{

console.log(…)

})

生命周期函数



constructor组件创建的时候被调用 不属于生命周期

componentWillMount：在组件即将被挂载到页面的时刻自动执行

Render：页面重新渲染componentDidMount：组件被挂载到页面之后，自动执行

updation：

shouldComponentUpdate：组件被更新之前，会自定被执行（return false不对组件进行更新）接收两个参数 nextProps nextStatecomponentWillUpdate：组件被更新之前，会被自动执行，在shouldComponentUpdate之后才执行（返回true才执行）

shouldComponentUpdate-》componentWillUpdate-》Render-》componentDidMount

componentWillReciveProps：当一个组件从父组件接收了参数 只要父组件的render函数被重新执行了 子组件的这个生命周期函数就会被执行（child）

如果这个组件第一次存在于父组件中，是不会被执行的如果之前已经存在与父组件中，才会被执行componentWillUnmount：当这个组件即将被从页面中剔除的时候，会被执行 （child）

ajax请求：

componentDidMount

如果放在render会造成死循环(render会被不断触发执行)

Redux



redux=reducer+fluximport store from './store/index'this.setState(store.getState())

index

import {createStore} from 'redux';import reducer from './reducer';const store = createStore(reducer,window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());export default  store;

actionCreators

import {CHANGE_INPUT_VALUE,ADD_TODO_ITEM,DELECT_TDO_ITEM} from './actionTypes'export const getInputChangeAction = (value)=>({    type:CHANGE_INPUT_VALUE,    value})export const getAddItemAction = (value)=>({    type:ADD_TODO_ITEM})export const getDelectItemAction = (index)=>({    type:DELECT_TDO_ITEM,    index})

actionTypes

export const CHANGE_INPUT_VALUE = 'change_input_value'export const ADD_TODO_ITEM ='add_todo_item'export const DELECT_TDO_ITEM='delect_todo_item'

reducer

import {CHANGE_INPUT_VALUE,ADD_TODO_ITEM,DELECT_TDO_ITEM} from './actionTypes'const defaultState = {    inputValue:'',    list:['zwt','wollen']}//定义仓库的默认数据//reducer可以接受state 但是绝对不能修改state//reducer是春函数 ：给定固定的输入 就一定有固定的输出//不能使用雷士date的操作export default (state = defaultState,action)=>{    if(action.type === CHANGE_INPUT_VALUE){        const newState = JSON.parse(JSON.stringify(state))        newState.inputValue = action.value        return newState;    }    if(action.type === ADD_TODO_ITEM){        const newState = JSON.parse(JSON.stringify(state))        newState.list.push(newState.inputValue)        newState.inputValue = ''        return newState;    }    if(action.type === DELECT_TDO_ITEM){        const newState = JSON.parse(JSON.stringify(state))        newState.list.splice(action.index,1)        return newState;    }    return state}//state:整个仓库存储的数据内容//action: