摘要: 如果组件中的部分功能相似或者相同,该如何处理 1处理相似的函数 2复用state 操作state的方法 3render props HOc 4两种方式不是新的api 根据编码技巧 演化为某种模式 阅读全文
posted @ 2022-05-23 21:10 前端导师歌谣 阅读(26) 评论(0) 推荐(0) 编辑
摘要: 1思路:将要复用的state和操作state的方法封装到一个组件中 如何拿到该组件复用的state 在使用组件时,添加一个值为函数的props 通过函数参数来获取 <Mouse render={{mouse}=>{}} 阅读全文
posted @ 2022-05-23 21:10 前端导师歌谣 阅读(13) 评论(0) 推荐(0) 编辑
摘要: 使用步骤 创建Mouse组件,在组件中提供复用状态逻辑代码(1:状态 2操作状态的方法) 2将要复用的状态作为props.render(state)方法的参数 暴露到组件外部 //导入react import React from 'react' import ReactDOM from 'reac 阅读全文
posted @ 2022-05-23 21:10 前端导师歌谣 阅读(16) 评论(0) 推荐(0) 编辑
摘要: //导入react import React from 'react' import ReactDOM from 'react-dom' //导入组件 // 约定1:类组件必须以大写字母开头 // 约定2:类组件应该继承react.component父类 从中可以使用父类的方法和属性 // 约定3: 阅读全文
posted @ 2022-05-23 21:10 前端导师歌谣 阅读(25) 评论(0) 推荐(0) 编辑
摘要: 注意:并不是该模式render Props就必须使用名为render的props,实际上可以使用任意名称 props 把props是一个函数并且告诉组件渲染什么内容的技术叫做render props模式 推荐 使用children代替render属性 //导入react import React f 阅读全文
posted @ 2022-05-23 21:10 前端导师歌谣 阅读(19) 评论(0) 推荐(0) 编辑
摘要: 1render props添加props校验 2组件卸载时候解除事件的一个绑定 阅读全文
posted @ 2022-05-23 21:10 前端导师歌谣 阅读(18) 评论(0) 推荐(0) 编辑
摘要: 1目的:实现状态逻辑复用 2采用包装装饰模式 手机 :获取保护功能 手机壳:提供保护功能 高阶组件就相当于手机壳 通过包装组件 增强组件功能 高阶组件是一个函数 接受要包装的组件 返回增强后的组件 阅读全文
posted @ 2022-05-23 21:10 前端导师歌谣 阅读(14) 评论(0) 推荐(0) 编辑
摘要: 使用步骤 1创建一个函数 名称约定以with开头 2制定函数参数 参数应该以大写字母开头(作为要渲染的组件) 3在函数内部创建一个类组件 提供复用的状态逻辑代码 并返回 4在该组件中 渲染参数组件 同事将状态通过props传递给参数组件 //导入react import React from 're 阅读全文
posted @ 2022-05-23 21:10 前端导师歌谣 阅读(20) 评论(0) 推荐(0) 编辑
摘要: react通过displayNameshiyong 设置displayName控制区分不同的组件 //导入react import React from 'react' import ReactDOM from 'react-dom' //导入组件 // 约定1:类组件必须以大写字母开头 // 约定 阅读全文
posted @ 2022-05-23 21:10 前端导师歌谣 阅读(109) 评论(0) 推荐(0) 编辑
摘要: 问题:props丢失 原因:高阶组件没有往下传递props 解决WrappedComponent,将state和this.props一起传递给组件 阅读全文
posted @ 2022-05-23 21:10 前端导师歌谣 阅读(13) 评论(0) 推荐(0) 编辑
摘要: 1组件通讯是构建react应用不可少的一环 2props的灵活性和组件更加强大 3状态提升是react组件的常用模式 4组件生命周期有助于组件的运行过程 5钩子函数让开发者在特定的时机执行的拱门呢个 6render props模式和高阶组件都可以实现组件状态逻辑复用 阅读全文
posted @ 2022-05-23 21:10 前端导师歌谣 阅读(13) 评论(0) 推荐(0) 编辑
摘要: 能够知道setState()更新数据是异步的 能够知道jsx语法的转换过程 能够说出React组件的更新机制 能够对组件进行性能优化 能够说出虚拟dom和diif算法 阅读全文
posted @ 2022-05-23 21:10 前端导师歌谣 阅读(16) 评论(0) 推荐(0) 编辑
摘要: 1.1setState是异步更新数据的 //多次调用setstate只执行一次 this.state={count:1} this.setstate({ count:this.state.count+1 }) console.log(this.state.count)//1 //导入react im 阅读全文
posted @ 2022-05-23 21:10 前端导师歌谣 阅读(18) 评论(0) 推荐(0) 编辑
摘要: 1.2推荐语法 this.setState((sate,props)=>{ }) 参数state:表示最新的state 参数props:表示最新的props //导入react import React from 'react' import ReactDOM from 'react-dom' // 阅读全文
posted @ 2022-05-23 21:10 前端导师歌谣 阅读(17) 评论(0) 推荐(0) 编辑
摘要: 在状态更新后执行某个操作 setState(update,[callback]) //导入react import React from 'react' import ReactDOM from 'react-dom' //导入组件 // 约定1:类组件必须以大写字母开头 // 约定2:类组件应该继 阅读全文
posted @ 2022-05-23 21:10 前端导师歌谣 阅读(102) 评论(0) 推荐(0) 编辑
摘要: jsx是createElement的语法糖 jsx语法是被@babel/preset-react编译为createElement()方法 React元素 是一个对象 用来描述你希望看到的内容 阅读全文
posted @ 2022-05-23 21:10 前端导师歌谣 阅读(14) 评论(0) 推荐(0) 编辑
摘要: setState的两个作用 1修改state 2更新组件 父组件重新渲染的时候 也会重新更新子组件 但只会渲染当前组件子树 阅读全文
posted @ 2022-05-23 21:10 前端导师歌谣 阅读(17) 评论(0) 推荐(0) 编辑
摘要: 减轻state 只存储更组件渲染相关的数据(count/列表数据/loading等) 注意:不用做渲染的数据不要放在state中 比如定时器id等 对于这种需要在多个方法用到的数据 应该放在this中 //导入react import React from 'react' import ReactD 阅读全文
posted @ 2022-05-23 21:10 前端导师歌谣 阅读(18) 评论(0) 推荐(0) 编辑
摘要: 组件更新机制:父组件更新也会引起子组件也被更新 这种思路很清晰 子组件没有任何变化的时候也会重新渲染 解决方式 使用shouldComponentUpdate(nextProps,nextState) nextProps最新的props nextState最新的状态 shouldComponentU 阅读全文
posted @ 2022-05-23 21:10 前端导师歌谣 阅读(21) 评论(0) 推荐(0) 编辑
摘要: //导入react import React from 'react' import ReactDOM from 'react-dom' //导入组件 // 约定1:类组件必须以大写字母开头 // 约定2:类组件应该继承react.component父类 从中可以使用父类的方法和属性 // 约定3: 阅读全文
posted @ 2022-05-23 21:10 前端导师歌谣 阅读(10) 评论(0) 推荐(0) 编辑