irene200825 / blog Goto Github PK

function App() {
  return (
    <div>
        hello world
    </div>
  );
}
export default App;

import App from './App';
ReactDOM.render(
    <App />,
  document.getElementById('root')
);

2.2component

class App extends React.Component {
  render() {
    return <div>hello world</div>;
  }
}

export default App;
import App from './App';
ReactDOM.render(
  element,
  document.getElementById('root')
);

2.3传值

父组件传值给子组件
父组件
content={item}
子组件
{ths.props.content}

子组件给父组件传值(把方法传给子组件)
deleteItem={this.handleItemDelete.bind(this)}
子组件
this.props.deleteItem(this.props.index)

2.4单向数据流
父组件可以向子组件可以传值但是不能修改

3.Fragment占位符，隐藏标签，代替最外层的div

4.数据存储在constructor中的state中

 constructor(prop){
     super(props);
     this.state = {
         a:'',
         b:''
     }
 }

 jsx中使用的时候一定是用一个大括号,{this.state.a}这样使用

 改变数据
 this.setState({
     a:'anzi'
 })

里面可以有函数，异步的，提升性能
let a='anzi'
 this.setState(()=>({
     a
 }))

 this.setState(()=>({
     a
 }),()=>{
   //执行完成之后  回调函数
 })

5.事件

onChange={this.handleInputChange.bind(this)}
onClick={this.handleButtonClick.bbind(this)}

e.target.value

6.immutable

state不允许我们做任何改变

7.immutable

注释{/34534/} 注释{//34534}

8.class

className代替class ,否则会和class有混淆
HtmlFor代替for
id不变

9.dangerouslySetInnerHTML={{_html:内容}}

10.propTypes

import PropTypes from 'prop-types'

TodoItem.propTypes = {
    content : PropTypes.string,
    deleteItem : PropTypes.func,
    index: PropTypes.number.isRequired
}

//默认值
TodoItem.defaultProps = {
    content:'1111'
}

arrayOf
oneOfType

11.render

12.虚拟DOM

JSX -> React.createElement-> 虚拟DOM(JS 对象) -> 真实的DOM

React.createElement('div',{},React.createElement('div',{},'item'))

性能提升
跨端应用得以实现 React Native

13.diff算法

比较原始的DOM和虚拟的DOM进行比对，当数据发生改变的时候
setState是异步的
同级比较，第一层比较，第二层比较，第三层比较，比对速度非常快
根据key值做关联，极大提高比较性能，因此key值不要是index

14.ref(尽量不要使用这个)

ref={(input)=>{this.input=input}}

this.input指向input标签对应的元素

this.ul.querySelectorAll('div').length

14.react生命周期函数

组件被创建的时候constructor

mounting挂载

componentWillMount挂载前(第一次被执行)
render挂载中
componentDidMount挂载成功(第一次被执行)(axios加载数据)

updation

shouldComponentUpdate组件更新前，return true或者false(提升性能)
componentWillUpdate更新前
render更新中
componentDidUpdate更新成功

componentWillReceiveProps1.当一个组件从父组件接受参数2.组件第一次存在组件中，不会执行3.组件第二次存在组件中会被执行

unmounting
componentWillUnmount组件即将从页面中剔除的时候

15.react中使用css动画效果

transition:all 1s ease-in forwards;//forwards保存最后一帧效果

@Keyframes{
0%{}
50%{}
100%{
效果需要保持
}
}

github中查询就可以 react-transition-group

<CssTransition  in={this.state.show} timeout={1000} className='fade'>

redux学习

state是笔记本数据
function reducer(state=defaultState,action){
  return state;
}

import {createStore} from 'redux';
const store = createStore(reducer);






import store form './store'
let value=store.getState()


const action = {
  type:'change_input_value',
  value:''
}
store.dispatch(action)

function reducer(state=defaultState,action){
  if(action === ’change_input_value‘){
    const newState=JSON.parse(JSON.stringify(state))
    newState.inputValue = action.value
    return newState
  }
  return state;
}


store.subscribe(this.handleStoreChange)
只有store能改变自己的内容

rudex thunk

dispatch里面可以传入一个函数，异步操作

rudex saga

和redux thunk作用差不多

react redux

import {Provider} from 'react-redux'
<Provider store={store}>
  <App/>
</Provider>

import {connect} from 'react-redux'
const mapStateToProps = (state)=>{
  return {
    inputValue:state.inputValue
  }
}

this.props.inputValue


const mapDispatchToProps = (dispach)=>{
  return {
    handleInputChangeValue(e){
      dispach(action)
    }
  }
}

connent(mapStateToProps,mapDispatchToProps)(TodoList)

《深入浅出Vue.js》第一篇变化侦测读书笔记

《深入浅出Vue.js》Object变化侦测读书笔记

《深入浅出Vue.js》的作者刘博文是参考2.5.2版本进行撰写的，因此我下载相同版本进行学习2.5.2版本下载

1.基本概念

Vue.js的特性？

响应式系统...

响应式系统是什么？

响应式系统是通过改变数据模型实现视图的更新。它的核心是变化侦测。

变化侦测作用是什么？

侦测到数据的变化，通知视图进行更新和渲染。

渲染是什么？

状态作为输入，并生成DOM输出到页面上显示出来的这个过程。

2.Object变化侦测的原理

Vue.js变化侦测的原理是什么？

一个状态绑定多个依赖，当状态发生变化时，通知绑定的依赖更新。

状态是什么？

可以是javaScript的任何类型。状态最终可能会以段落、表单、链接、按钮等元素的形式呈现在页面上。

依赖是什么？

依赖是使用数据的地方，比如模板、watch等。

特别注意，因为依赖有很多类型，我们可以在数据和依赖中间加一个观察者角色Watcher。它的作用就像商家和顾客中间的快递员。商家要发货给顾客，因为顾客很多，商家把货物丢给快递员就行，然后快递员自己看着办。

data怎么绑定Watcher？

第一步找到存储Watcher的容器。第二步把Watcher放进去。

收集Watcher的容器是什么？

我们使用数组进行收集，给数组取名为subs。

Watcher怎么放进去？

我们使用Object.defineProperty，重写属性的get方法，在getter中收集依赖，只要有地方获取值触发getter,就可以自动收集依赖。每个属性配备一个subs。

当数据发生变化时，怎么通知依赖更新？

同样我们使用Object.defineProperty，重写属性的set方法, 当setter被触发时，我们循环该状态的subs，通知里面的每一个Watcher，由Watcher通知依赖更新。

怎么侦测到数据的所有属性？

Observe类，递归侦测所有属性。

能整一个流程图吗？

2.4 Object的变化侦测demo

运行结果

执行
let observer = new Observer(data)
console.log("侦测对象data:", observer)

执行
new Watcher(data, 'person.name', function (val, newVal) {
    console.log("Watcher回调")
})

当触发person.name的getter函数，我们会发现Dep的subs中新增了一个Watcher对象，而Watcher对象中有depIds和deps记录自己会被哪些Dep通知。

由于获取person.name值时，会触发person的getter函数和name的getter函数，因此我们会看到控制台打印了两条数据，两个dep的id不同，subs里面存储了同一个Watcher对象，Watcher对象的deps里记录它可以被id为0和id为1的对象通知到。

执行
data.person.name = {
    firstName: 'hongan',
    lastName: 'Zhang',
    newName:'111'
}

修改name的值，id为1的dep存储的Watcher被通知

小程序首页加载速度过慢问题

小程序首页加载速度过慢问题解决方法

1.控制小程序包
小程序启动时默认只加载主包，再按需加载分包。这一策略良好的保证小程序的启动速度。

分包
一方面，代码包越大，下载时间就越长；
另一方面，代码包越大，通常意味着小程序页面结构和代码逻辑复杂，启动时代码注入执行的时间越长。
独立分包
独立分包是小程序中一种特殊类型的分包，可以独立于主包和其他分包运行。从独立分包中页面进入小程序时，不需要下载主包。当用户进入普通分包或主包内页面时，主包才会被下载。
分包预加载
分包预下载便是为了解决首次进入分包页面时的延迟问题而设计的

2.网络请求network

后端响应前端的请求，请求超过300ms算慢的

3.图片

图片缓存，服务器返回cache-control头部。一般对于资源请求建议加上缓存头部，这样下次访问相同的资源就不用重新向服务发起请求。304是需要向服务器询问资源有没有更新，也是会消耗一次请求后才读取缓存再渲染出来。
懒加载技术 lazy-load
短时间内发起太多图片请求会触发浏览器并行加载的限制，可能导致图片加载慢，用户一直处理等待，应该合理控制数量。
雪碧图技术
大图片压缩处理
把一些体积较大的图片资源改为使用线上资源。具体做法是将素材先上传到 cdn，然后在小程序中直接使用线上图片地址

4.WXML节点数
5.setData数据大小和调用频率
6.首屏时间
把内容分优先级，把优先级高的内容做优先展示，缩短白屏时间；
一次性渲染数据太大或依赖的计算过于复杂

Markdown

在项目中，通常会有一个README.md文件，它的后缀名为md，md是Markdown文档。接下来，我将从Markdown定义，存在的意义以及基础语法出发快速了解并上手Markdown。

1.Markdown是什么？

Markdown是一种轻量级标记语言，创始人为约翰·格鲁伯（英语：John Gruber）。它允许人们使用易读易写的纯文本格式编写文档，然后转换成有效的XHTML（或者HTML）文档。 --摘自百度百科

既然Markdown会被转换成XHML或者HTML文档，我们可以直接使用HTML超文本标记语言，为什么还需要使用Markdown这一种轻量级标记语言？

2.为什么需要Markdown？

Markdown是由John Gruber于2004年创建，它的出现从来不是取代HTML，它无法取代HTML，但它有其存在的意义。

简单易学。相比HTML，Markdown的语法更加的简洁明了，更易上手。
极富表现力。相比纯文本，用户使用简单的标记符号即可完成内容排版。
格式转换方便。Markdown文件可以轻松转换成html、pdf等文件。
使用广泛。简书、github、csdn等等都支持Markdown文档。我们可以使用Markdown记笔记，写技术文档。

3.Markdown的基础语法

我一般使用vscode编辑Markdown文档，vscode是默认支持Markdown的。如果你和我一样喜欢使用vscode，极力推荐一款插件Markdown Preview Enhanced。

接下来我们将介绍几个常用的语法。
1.标题几个#就表示第几级标题

一级标题

二级标题

# 一级标题
## 二级标题

2.文字样式
这会是斜体的文字
这会是粗体的文字
~~这个文字将会被横线删除~~

*这会是 斜体 的文字*
**这会是 粗体 的文字**
~~这个文字将会被横线删除~~

3.无序列表

Item 1
- Item 1.1

* Item 1
  * Item 1.1

4.有序列表

Item 1
Item 2
Item 3
1. Item 3a
2. Item 3b

1. Item 1
1. Item 2
1. Item 3
   1. Item 3a
   1. Item 3b

5.图片

<img width="231" alt="屏幕快照 2020-08-25 下午9 08 45" src="https://user-images.githubusercontent.com/52225549/91194174-80934800-e72a-11ea-834e-6d10658ce30b.png">

6.链接

Markdown学习笔记
[Markdown学习笔记](https://github.com/Irene200825/Blog/issues/1)

7.引用

这是引用文本
> 这是引用文本

8.分割线

---
***
___

9.代码一行用`，多行用，语法高亮ruby

这是代码

这是代码
代码

这是代码
代码

10.任务列表

- [x] 1
- [ ] 2

11.表格

姓名	年龄	性别
张三	23	女
李四	25	男

姓名 | 年龄 | 性别
-----| -----| -----
张三 | 23 | 女
李四 | 25 |男

12.我最喜欢的表情

😄
:smile:

4.参考查阅文献资料

John Gruber的简介：https://www.ifanr.com/151315
John Gruber的Markdown文档：https://daringfireball.net/projects/markdown
Markdown Preview Enhanced插件文档包含Markdown使用文档：https://www.bookstack.cn/read/mpe/zh-cn-_sidebar.md

irene200825 / blog Goto Github PK

blog's Introduction

学习笔记