react入门笔记

2018-11-15 admin

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(…)

})

生命周期函数

clipboard.png 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

clipboard.png redux=reducer+flux  clipboard.png 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:

原文链接:https://segmentfault.com/a/1190000017028014

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-45553.html

文章标题:react入门笔记

相关文章
JavaScript数据类型判定的总结笔记
用typeof 来检测数据类型 Javascript自带两套类型:基本数据类型(undefined,string,null,boolean,function,object)和对象类型。 但是如果尝试用typeof 来检测对象类型都一律返回&...
2017-03-27
Ant design pro 开发笔记 - 表单和数据绑定
antd支持表单双向绑定,开发过程中无需通过onChange()回调函数去获取组件的值,通过 getFieldDecorator() 可以自动完成数据绑定的功能。 { getFieldDecorator(&#x27;email&#x...
2018-05-25
整理关于Bootstrap警示框的慕课笔记
在网站中,网页总是需要和用户一起做沟通与交流。特别是当用户操作上下文为用户提供一些有效的警示框,比如说告诉用户操作成功、操作错误、提示或者警告等。如下图所示: 在Bootstrap框架有一个独立的组件,实现上述的效果,这个组件被称为警示框...
2017-04-01
Windows系统下Node.js的简单入门教程
随着近日Paypal和Netflix宣告 迁移到Node.js, 服务器端Javascript平台已经证明其自身在企业领域的价值. 这对于Node来说是一小步,对于Javascript而言却是一大跨越啊! 来自.NET, Java, PHP...
2017-03-24
AngularJS基础知识笔记之过滤器
过滤器是用来更改修改数据,并且可以在表达式或使用管道符指令将其归入。以下是常用的过滤器的列表。 S.No. 名称 描述 1 大写 转换文本为大写文本。 2 小写 转换文本为小写文本。 3 货币 货币格式格式文本。 4 过滤器 过滤数组中它根...
2017-03-23
AngularJS基础知识笔记之表格
表格数据本质上通常是重复的。ng-repeat指令,可以用来方便地绘制表格。下面的示例说明使用ng-repeat指令来绘制表格。 &lt;table&gt; &lt;tr&gt; &lt;th&gt;Name&lt;&#x2F;t...
2017-03-23
Grunt入门教程(自动任务运行器)
在Javascript的开发过程中,经常会遇到一些重复性的任务,比如合并文件、压缩代码、检查语法错误、将Sass代码转成CSS代码等等。通 常,我们需要使用不同的工具,来完成不同的任务,既重复劳动又非常耗时。Grunt就是为了解决这个问题而...
2017-03-27
AngularJS基础学习笔记之指令
AngularJS通过指令将HTML属性进行了扩展。 AngularJS指令 AngularJS指令是带有ng-前缀的扩展HTML属性。 ng-app指令用来初始化AngularJS application。 ng-init指令用来初始化a...
2017-03-23
AngularJS基础学习笔记之控制器
AngularJS控制器用来控制AngularJS applications的数据。 AngularJS控制器就是普通的JavaScript对象。 AngularJS控制器 AngularJS applications通过控制器进行控制。 ...
2017-03-23
AngularJS学习笔记之基本指令(init、repeat)
AngularJS学习笔记之基本指令(init、repeat) &lt;h3&gt;ng-init初始化变量&lt;&#x2F;h3&gt; &lt;div ng-init=&quot;name=&#x27;aurora&#x27;;age...
2017-03-24
回到顶部