Damon

Damon

react笔记

this.setState(function (state, props) {
  return {
    counter: state.counter + props.incremnt,
  };
});
this.setStae({
    conuter:***
})
this.setState({
    conuter:***
},()=>{
    console.log(counter,'更新后得conter值')
    })

react中，使用组件组合是比使用context更好的解决方案，并且更利于代码阅读。react组件组合

高阶组件是一个接受一个组件，并返回一个新组件的函数。

// React Redux 的 `connect` 函数
const ConnectedComment = connect(commentSelector, commentActions)(CommentList);

// connect 是一个函数，它的返回值为另外一个函数。
const enhance = connect(commentListSelector, commentListActions);
// 返回值为 HOC，它会返回已经连接 Redux store 的组件
const ConnectedComment = enhance(CommentList);

换句话说，connect 是一个返回高阶组件的高阶函数！

// 给高阶函数HOC设置显示名称，可以在react developer tools查看
function withSubscription(WrappedComponent) {
  class WithSubscription extends React.Component {/* ... */}
  WithSubscription.displayName = `WithSubscription(${getDisplayName(WrappedComponent)})`;
  return WithSubscription;
}

function getDisplayName(WrappedComponent) {
  return WrappedComponent.displayName || WrappedComponent.name || 'Component';
}

Hook

** EffectHook **

你可以把 useEffect Hook 看做 componentDidMount，componentDidUpdate 和 componentWillUnmount 这三个函数的组合。 tips 与 componentDidMount 或 componentDidUpdate 不同，使用 useEffect 调度的 effect 不会阻塞浏览器更新屏幕，这让你的应用看起来响应更快。 大多数情况下，effect 不需要同步地执行。在个别情况下（例如测量布局），有单独的 useLayoutEffect Hook 供你使用

忘记正确地处理 componentDidUpdate 是 React 应用中常见的 bug 来源。[这是为什么effect hook是三个钩子函数组合的原因]

·effect性能优化=》class的componentDidUpdate·

redux redux 1、通过combineReducers合并所有的reducer 2、通过createStore创建store

Hook

1、通过useDispatch(),可以获取dispatch操作 2、通过useSelector(),可以获取store内的需要操作的函数，可结构出要使用的数据

ReactDOM扩展

  1. createPortal方法，用来渲染到指定根元素如: #root2. ReactDOM.createPortal(Vnode,container)
  2. findDOMNode,可以在class类组件得挂在后获取到DOM节点
  3. unmountComponentAtNode方法，用来卸载容器内所有组件.ReactDOM.unmountComponentAtNode(document.querySelector('#root'))
  4. unstabl_batchedUpdates方法，解决异步代码中多次渲染问题.(异步操作内：)ReactDOM.unstabl_batchedUpdates(()=>{需要执行得操作})
  5. react组件懒加载16.7版本以后，lazy和Suspense组件配合使用，

2022年1月27日笔记

Generator

是一个函数，一个ES6异步编程解决方案

  • function* FNname(){} 函数关键字和函数名中间有一个*如此便是一个Generator函数。
  • 内部有yield表达式，定义不同的内部状态

有以下特点：

  1. 惰性执行
  2. .next()执行方法
  3. 返回对象拿到value和done
  4. done为ture结束。
  5. next()可以传参数，参数在yeild前面接收 直接打印Generator函数打印的是一个生成器(遍历器对象)，而不是函数返回结果。 执行Generator函数会提供一个.next()方法，执行后返回一个对象，对象中有有个done属性和value属性， 当为ture时代表执行到了return了。继续执行value将为undefined。
← Back to home