摘要: 1.2项目搭建 初始化项目 1初始化项目:npx create-react-app hkzf-moblie 2启动项目 npm start 阅读全文
posted @ 2022-05-25 18:02 前端导师歌谣 阅读(24) 评论(0) 推荐(0) 编辑
摘要: 如果组件中的部分功能相似或者相同,该如何处理 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) 编辑