react入门笔记

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 来显示

<div id=‘abc><span>hello</span></div>

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 nextState
componentWillUpdate：组件被更新之前，会被自动执行，在shouldComponentUpdate之后才执行（返回true才执行）

shouldComponentUpdate-》componentWillUpdate-》Render-》componentDidMount

componentWillReciveProps：当一个组件从父组件接收了参数 只要父组件的render函数被重新执行了 子组件的这个生命周期函数就会被执行（child）
如果这个组件第一次存在于父组件中，是不会被执行的
如果之前已经存在与父组件中，才会被执行
componentWillUnmount：当这个组件即将被从页面中剔除的时候，会被执行 （child）

ajax请求：

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

Redux



redux=reducer+flux


import 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: