随笔分类 - 前端歌谣歌谣-学习篇React-好客租房笔记
摘要：1render props添加props校验 2组件卸载时候解除事件的一个绑定
阅读全文
摘要：1目的:实现状态逻辑复用 2采用包装装饰模式 手机 :获取保护功能 手机壳:提供保护功能 高阶组件就相当于手机壳 通过包装组件 增强组件功能 高阶组件是一个函数 接受要包装的组件 返回增强后的组件
阅读全文
摘要：使用步骤 1创建一个函数 名称约定以with开头 2制定函数参数 参数应该以大写字母开头（作为要渲染的组件） 3在函数内部创建一个类组件 提供复用的状态逻辑代码 并返回 4在该组件中 渲染参数组件 同事将状态通过props传递给参数组件 //导入react import React from 're
阅读全文
摘要：react通过displayNameshiyong 设置displayName控制区分不同的组件 //导入react import React from 'react' import ReactDOM from 'react-dom' //导入组件 // 约定1：类组件必须以大写字母开头 // 约定
阅读全文
摘要：问题:props丢失 原因:高阶组件没有往下传递props 解决WrappedComponent，将state和this.props一起传递给组件
阅读全文
摘要：1组件通讯是构建react应用不可少的一环 2props的灵活性和组件更加强大 3状态提升是react组件的常用模式 4组件生命周期有助于组件的运行过程 5钩子函数让开发者在特定的时机执行的拱门呢个 6render props模式和高阶组件都可以实现组件状态逻辑复用
阅读全文
摘要：能够知道setState（）更新数据是异步的 能够知道jsx语法的转换过程 能够说出React组件的更新机制 能够对组件进行性能优化 能够说出虚拟dom和diif算法
阅读全文
摘要：1.1setState是异步更新数据的 //多次调用setstate只执行一次 this.state={count:1} this.setstate({ count:this.state.count+1 }) console.log(this.state.count)//1 //导入react im
阅读全文
摘要：1.2推荐语法 this.setState((sate,props)=>{ }) 参数state:表示最新的state 参数props:表示最新的props //导入react import React from 'react' import ReactDOM from 'react-dom' //
阅读全文
摘要：在状态更新后执行某个操作 setState（update,[callback]） //导入react import React from 'react' import ReactDOM from 'react-dom' //导入组件 // 约定1：类组件必须以大写字母开头 // 约定2:类组件应该继
阅读全文
摘要：jsx是createElement的语法糖 jsx语法是被@babel/preset-react编译为createElement（）方法 React元素 是一个对象 用来描述你希望看到的内容
阅读全文
摘要：setState的两个作用 1修改state 2更新组件 父组件重新渲染的时候 也会重新更新子组件 但只会渲染当前组件子树
阅读全文
摘要：减轻state 只存储更组件渲染相关的数据（count/列表数据/loading等） 注意:不用做渲染的数据不要放在state中 比如定时器id等 对于这种需要在多个方法用到的数据 应该放在this中 //导入react import React from 'react' import ReactD
阅读全文
摘要：组件更新机制:父组件更新也会引起子组件也被更新 这种思路很清晰 子组件没有任何变化的时候也会重新渲染 解决方式 使用shouldComponentUpdate（nextProps,nextState） nextProps最新的props nextState最新的状态 shouldComponentU
阅读全文
摘要：//导入react import React from 'react' import ReactDOM from 'react-dom' //导入组件 // 约定1：类组件必须以大写字母开头 // 约定2:类组件应该继承react.component父类 从中可以使用父类的方法和属性 // 约定3:
阅读全文
摘要：children属性 表示组件标签的子节点 当组件标签有子节点是 props就会有该属性 props中的组件可以是任意属性 都是可以渲染的 //导入react import React from 'react' import ReactDOM from 'react-dom' //导入组件 // 约
阅读全文
摘要：对于组件来说 props是外来的 无法保证使用者传入什么格式的数据 传入的数据格式不对 可能会导致组件内部报错 关键问题:不知道报错的具体原因 1安装包props-types 2导入props-types 3组件名.propTypes={}添加规则 //导入react import React fr
阅读全文
摘要：1常见类型:Array，bool,func，number,object，string 2React:element 3必填项:isRequred 4特定结构的想:shape({}) //导入react import React from 'react' import ReactDOM from 'r
阅读全文
摘要：1给props设置默认值 //导入react import React from 'react' import ReactDOM from 'react-dom' import PropTypes from 'prop-types' //导入组件 // 约定1：类组件必须以大写字母开头 // 约定2
阅读全文
摘要：6.1组件的生命周期概述 组件的生命周期有助于理解组件的运行方式 完成更复杂 的组件功能 分析组件错误原因等 组件的生命周期 组件从创建到挂载到卸载 生命周期的每个阶段伴随着一些方法调用 这些方法就是生命周期的钩子函数
阅读全文
