react细节 | 易学教程

1.在函数式组件中使用类型和默认值

function App({ name }) {
  return (
    <div>
      <h1>{name}</h1>
    </div>
  )
}

App.prototype = {
  name: types.string.isRequired        func / number / symbol / object
}
App.defaultProps = {
  name: "wanglei1234"
}

当父组件的render函数被运行时,它的子组件render函数也会被重新执行

虚拟DOM的好处

1.性能提升了

2.它使得跨端应用得以实现(虚拟DOM不生成真实DOM，而生成原生的应用的组件)

Diff算法比对虚拟DOM(js对象)

同级比对 + key值比对

一致：继续比较第二层

不一致：不再进行下一步比较

好处是比对算法非常简单

为什么setState要设计成异步函数

多次短时间的操作合并成一次操作减少比对虚拟DOM的次数

循环的时候 key的意义比对和key值做关联

为什么key值不要设置为index

因为插入数组的时候，div的index可能变成其他div的index

导致key值不稳定，就失去了存在的意义

Redux设计和使用的三项原则

1.store是唯一的

2.只有store能够改变自己的内容

3.reducer必须是纯函数

是store拿到reducer返回的数据,然后store来进行更新的，这也是为什么reducer一定不要直接改变store里面的内容

Reducer必须是纯函数，所以里面不能有异步操作和时间相关的操作

中间指的是 action和store的中间，redux-thunk只是对dispatch的升级

background-size: contain; 表示让图片包含在div中正常大小

&::placeholder {
    color: #999;
  }
改变placeholder 的字体颜色

获取动态路由参数： this.props.match.params.id

回到顶部功能

window.scrollTo(0,0)

函数式编程给测试带来了便捷

bind(this,index) 可以在bind里面传递参数

解析html    可能存在XSS攻击
<li  dangerouslySetInnerHTML={{__html:item}} />

label扩大点击区域
<label   htmlFor=’inputa’>输入内容</label>
<input   id=”inputa”  />

只要父组件的render函数重新被执行了,子组件的该函数就会被执行

//如果这个组件第一次存在父组件中,不会被执行

//如果这个组件之前已经存在于父组件中,才会被执行

registerServiceWorker的作用

PWA progressive web application 写手机app应用

第二次访问会缓存

sagas文件(saga.js)一定要导出generator函数
function* getInitData(){
  try{
    const res = yield axios.get('/api/getList.json');
    const action = initListData(res.data);
    yield put(action);
  }catch(e){
    console.log('网络请求失败');
  }
}

function* mySaga() {
  yield takeEvery(actionTypes.Get_Init_Data, getInitData);
}
  // 后面执行的函数 可以是普通函数
export default mySaga;
import { takeEvery，put } from ‘redux-saga/effects’;
put 相当于store.dispatch()

把state 数据对象转化成immutable 对象 fromJS方法
import { fromJS } from 'immutable';

const defaultState = fromJS({  把js对象转化成immutable对象
  focused:false
});

export default (state = defaultState,action)=>{
    return state.set('focused',!state.get('focused'));
  }
  return state;
}

const mapStateToProps = (state)=>({
  focused:state.header.get('focused')  immutable数据调用方法
});


redux-immutable 模块的使用  yarn add redux-immutable
const mapStateToProps = (state)=>({
  focused:state.header.get('focused') immutable数据调用方法
});   

import { combineReducers } from 'redux';
const reducer = combineReducers({
  header: HeaderReducer
});
export default reducer;

只需要把 import { combineReducers } from 'redux';
改为 import { combineReducers } from 'redux-immutable';
即可
const mapStateToProps = (state)=>({
  focused:state.get(‘header’).get('focused') //immutable数据调用方法
});  
也可以
const mapStateToProps = (state)=>({
  focused:state.getIn([‘header’,’focused’]) 
});

里面的 list也是 immutable数组  所以不能这么改
在前面将其转化为不可变的  fromJS(data)
import { fromJS} from ‘immutable’

list.toJS()  immutable 不能直接进行 下标操作

来源：https://www.cnblogs.com/escapist/p/11987842.html

标签

immutable

react