共计 2561 个字符，预计需要花费 7 分钟才能阅读完成。
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 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:
