react入门笔记

Hanks10100 发布于2019-08-26 12:23 / 2509人阅读

摘要：是程序的入口文件自动化测试定义组件扩大点击区域虚拟的生成数据模板数据模板生成虚拟虚拟就是一个对象，用它来描述真实损耗了性能用虚拟的结构生成真实的来显示发生变化数据模板生成新的虚拟极大提升了性能数据更新比较原始虚拟和新的虚拟的区别找到区别极大

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

GPU云服务器云服务器 java开发入门笔记 react _React React 源码

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/108605.html

React 入门学习笔记整理目录

摘要：入门学习笔记整理一搭建环境入门学习笔记整理二简介与语法入门学习笔记整理三组件入门学习笔记整理四事件入门学习笔记整理五入门学习笔记整理六组件通信入门学习笔记整理七生命周期入门学习笔记整理八入门学习笔记整理九路由React 入门学习笔记整理（一）——搭建环境 React 入门学习笔记整理（二）—— JSX简介与语法 React 入门学习笔记整理（三）—— 组件 React 入门学习笔记整理（...

daryl 2019-04-23 11:57 评论0 收藏0
react入门学习笔记（一）

摘要：选择的主要原因大概是因为该框架出现较早，感觉上会相对成熟，日后学习中遇到问题想要查找答案相对简单一些，对，就是这么简单。多说无益，接下来开始的学习，我按照我学习中带着的问题来一一解答，完成我的入门笔记。主要是针对前端的组件化开发。这两天得空，特意来折腾了以下时下火热的前端框架react，至于为什么选react,作为一个初学者react和vue在技术上的优劣我无权评论，也就不妄加评论了...

leon 2019-08-20 18:01 评论0 收藏0
React入门笔记（一）

摘要：环境配置新版的要求统一使用作为的编译工具，因此我们选择，新建文件，内容如下设置候选版本为和这里因为要用到，所以把在候选版本里加入对的支持组件里引入的组件这个概念里的组件就像，里的控件一样，能方便快捷的作为界面的一部分实现一定功能，我们可以环境配置新版的React要求统一使用babel作为JSX的编译工具，因此我们选择babel，新建.babelrc文件，内容如下 { pre...

OpenDigg 2019-08-19 18:15 评论0 收藏0
Flux架构小白入门笔记

摘要：架构小白入门笔记是提出的一种处理前端数据的架构，学习就是学习它的思想。这个笔记是我在学习了阮一峰老师的架构入门教程之后得出，里面的例子和部分原文来自于其不同在于我用将其改写了，并加入了注释。 Flux架构小白入门笔记 Flux是facebook提出的一种处理前端数据的架构，学习Flux就是学习它的思想。这个笔记是我在学习了阮一峰老师的Flux 架构入门教程之后得出，里面的例子和部分原...

lily_wang 2019-08-22 10:45 评论0 收藏0
AI开发书籍分享

摘要：编程书籍的整理和收集最近一直在学习深度学习和机器学习的东西，发现深入地去学习就需要不断的去提高自己算法和高数的能力然后也找了很多的书和文章，随着不断的学习，也整理了下自己的学习笔记准备分享出来给大家后续的文章和总结会继续分享，先分享一部分的编程书籍的整理和收集最近一直在学习deep learning深度学习和机器学习的东西，发现深入地去学习就需要不断的去提高自己算法和高数的能力然后...

huayeluoliuhen 2019-06-26 18:18 评论0 收藏0