个人博客网站备案,东莞网站制作建设收费,长沙市天心区建设局网站,英文外链代发文章目录 一、受控组件1. 什么是受控组件2. 收集input框内容3. 收集checkBox的值4. 下拉框select总结 二、非受控组件三、高阶组件1. 高阶组件的概念 (回顾高阶函数)2. 高阶组件应用#xff1a;注入props(1) 高阶组件给---函数式组件注入props(2) 高阶组件给---类组件注入prop… 文章目录 一、受控组件1. 什么是受控组件2. 收集input框内容3. 收集checkBox的值4. 下拉框select总结 二、非受控组件三、高阶组件1. 高阶组件的概念 (回顾高阶函数)2. 高阶组件应用注入props(1) 高阶组件给---函数式组件注入props(2) 高阶组件给---类组件注入props(3) 高阶组件注入props自己需要注入props 3. 高阶组件应用context的增强4. 高阶组件应用登录鉴权5. 高阶组件应用生命周期劫持总结 四、 Portals五、 Fragment组件六、 严格模式StrictMode 一、受控组件
1. 什么是受控组件
当表单元素绑定value属性时就是受控组件此时按键盘也无法再向输入框里输入信息
若要输入信息必须绑定onChange事件,获取输入的值修改state然后通过value属性将修改后的值显示到输入框里。(很像vue中的v-model)
2. 收集input框内容
(1) form标签上绑定onSubmit事件当提交时触发该事件。 (2) label标签里htmlFor属性值为所绑定的表单属性的id值 (3) 两个不同类型输入框的处理事件合并到一个函数中。e.target.name的值是input标签里的name属性。e.target.value是输入框里的值。(键值读取变量用[]包裹)。
// 提交事件
handleSubmitClick (e) {// 1.阻止默认的行为e.preventDefault()// 2.获取到所有的表单数据, 对数据进行组件console.log(获取所有的输入内容:, this.state.username, this.state.password)// 3.以网络请求的方式, 将数据传递给服务器(ajax/fetch/axios)
}// 处理input框输入
handleInputChange (e) {this.setState({[e.target.name]: e.target.value})
}// 渲染render () {const { username, password } this.statereturn (divform onSubmit{e this.handleSubmitClick(e)}label htmlForusername用户:input typetext idusername nameusernamevalue{username}onChange{e this.handleInputChange(e)} //labelbr /label htmlForpassword密码:input typepassword namepassword idpasswordvalue{password}onChange{e this.handleInputChange(e)} //labelbr /button typesubmit注册/button/form/div)}3. 收集checkBox的值
单选框 (1) 通过checked属性设置该框是否被选中。实现数据改变页面 (2) 读取e.target.checked来获取用户的输入判断用户点击后checkbox是true还是false handleAgreeChange (e) {// 根据用户输入修改状态值this.setState({isAgree: e.target.checked})}
{/* 单选框 this.state.isAgree默认值是false */}const { isAgree } this.state
label htmlForagreeinputidagreetypecheckboxchecked{isAgree}onChange{e this.handleAgreeChange(e)}/同意协议
/labelbr /多选框 多选框就是循环遍历数据。与单选框处理逻辑类似注意修改hobbies时需要浅拷贝。 hobbies: [{ value: sing, text: 唱, isChecked: false },{ value: dance, text: 跳, isChecked: false },{ value: rap, text: rap, isChecked: true }],{/* 多选框 */}{hobbies.map((item, index) {return (label htmlFor{item.value} key{item.value}inputtypecheckboxid{item.value}checked{item.isChecked}onChange{(e) this.handleHobbiesChange(e, index)} /{item.text}/label)})}// 注意需要浅拷贝
handleHobbiesChange (e, index) {console.log(e.target.checked, index);const hobbies [...this.state.hobbies]hobbies[index].isChecked e.target.checkedthis.setState({ hobbies })
}4. 下拉框select
单选下拉框 1通过value属性来设置默认值fruit: apple, 2 e.target.value来读取用户选了什么水果 {/* 下拉框 */}{/* value{fruit} 设置默认值 */}select value{fruit} onChange{e this.handleFruitChange(e)}option valueorange橘子/optionoption valueapple苹果/optionoption valuebanana香蕉/option/select// 水果下拉框
handleFruitChange (e) {this.setState({ fruit: e.target.value })
}多选下拉框 1添加multiple属性设置多选此时绑定的value值为 fruits: [apple, banana]。 2e.target.selectedOptions获取用户选择具体看事件处理函数 {/* 多选框 */}select value{fruits} onChange{e this.handleFruitsChange(e)} multipleoption valueorange橘子/optionoption valueapple苹果/optionoption valuebanana香蕉/option/select
// 水果下拉多选框
handleFruitsChange (e) {const options Array.from(e.target.selectedOptions)// options里每一项的value值是用户选择的值const values options.map(item item.value)this.setState({ fruits: values })// 额外补充: Array.from(可迭代对象)// Array.from(arguments)const values2 Array.from(e.target.selectedOptions, item item.value)console.log(values2)
}总结
ElementValue propertyChange callbackNew value in the callbackinput typetext /valuestringonCahngee.target.valueinput typecheckbox /checked{boolean}onCahngee.target.checkedinput typeradio /checked{boolean}onCahngee.target.checkedtextarea/valuestringonCahngee.target.valueselect/valueoption valueonCahngee.target.value
二、非受控组件
(1) 绑定默认值不能用value会变成受控组件。应该用defaultValue (2) 给元素添加监听事件只能用原生的方式; 首先需要绑定ref然后添加监听事件addEventListener (3) 通过this.introRef.current.value来获取输入框里的值。 (4) checkbox和radio支持defaultCheckedselect和textarea支持defaultValue
export class App extends PureComponent {constructor() {super()this.state {intro: 123456}this.introRef createRef()}componentDidMount () {this.introRef.current.addEventListener(...)}// 提交事件handleSubmitClick (e) {// 1.阻止默认的行为e.preventDefault()// 2.获取到所有的表单数据, 对数据进行组件console.log(this.introRef.current.value);// 3.以网络请求的方式, 将数据传递给服务器(ajax/fetch/axios)}// 渲染render () {const { intro } this.statereturn (divform onSubmit{e this.handleSubmitClick(e)}{/* 非受控组件 */}input typetext defaultValue{intro} ref{this.introRef} /button typesubmit注册/button/form/div )}
}三、高阶组件
1. 高阶组件的概念 (回顾高阶函数)
(1) 高阶函数 满足这两个条件之一的就是高阶函数 接受一个或多个函数作为输入 输出一个函数 比如JS中的mapfilterreduce
funcition foo(){function bar(){}return bar
}
// foo函数返回一个函数所以这个也是高阶函数
const fn foo()(2) 高阶组件(Higher-Order Components) 简称HOC 高阶组件本质是一个函数(并不是组件)这个函数的参数是组件函数的返回值是一个新组件。
// 1. 定义一个原组件
class OriginHW extends PureComponent {render () {return (divHelloWorld/div)}
}
// 2. 定义一个高阶组件接收原组件并对原组件进行一些操作
function hoc (Cpn) {class newHW extends PureComponent {render () {return Cpn namewhy /}}return newHW
}// 3. 调用高阶组件这里的参数直接传原组件的名称接收到的一个新组件
const HelloHOC hoc(OriginHW)class App extends PureComponent {render () {return (div{/* 使用新组件 */}HelloHOC //div)}
}界面打印HelloWorld
可以看出高阶组件对原来的组件进行了一层拦截拦截之后就可以对组件进行一些操作再返回组件。
高阶组件不是React API的一部分是一种设计模式。 高级组件再一些React第三方库中十分常见 * 比如redux中的connect * 比如react-router中的withRouter
2. 高阶组件应用注入props 首先定义一个高阶组件用于给需要特殊数据的组件注入props数据。比如某些组件需要userInfo这个数据。
src/hoc/enhancedUserInfo.js
// 定义高阶组件给需要特殊数据的组件注入props
function enhancedUserInfo (OriginComponent) {class NewComponent extends PureComponent {// 构造函数constructor() {super()this.state {userInfo: {userName: tom,age: 18}}}render () {return (// 通过props的方式将数据传给组件OriginComponent {...this.state.userInfo} /)}}// 其实本质上return的是注入了props数据的OriginComponent/组件return NewComponent
}
export default enhancedUserInfo(1) 高阶组件给—函数式组件注入props
App.jsx
import React, { PureComponent } from react
import enhancedUserInfo from ./hoc/enhancedUserInfo
import About from ./pages/About// 增强函数式组件,props接收数据
// funtion后面可以不写函数名这里是为了区分增强前后Friend与NewFriend
const NewFriend enhancedUserInfo(function Friend (props) {return h2Hello--{props.userName}---{props.age}---{props.fruit}/h2
})// App应用函数式组件
class App extends PureComponent {render () {...NewFriend /}
}(2) 高阶组件给—类组件注入props
src/pages/About.jsx创建类组件About
import enhancedUserInfo from ../hoc/enhancedUserInfo
class About extends PureComponent {render () {return (div{/* 没有构造函数也可以读取this.props */}h2About---{this.props.userName}---{this.props.age}/h2/div)}
}
// 在导出的时候利用高阶组件增强改类组件让该组件收到props数据
export default enhancedUserInfo(About)App.jsx
// App应用函数式组件
class App extends PureComponent {render () {...About/}
}(3) 高阶组件注入props自己需要注入props
在使用子组件之前通过高阶组件可以注入一些props数据如果在App中使用子组件时也往里传递了数据该怎么接收。
class App extends PureComponent {render () {return (div{/* fruit实际是传给了高阶组件里的NewComponent */}NewFriend fruit{[apple, banana]} /About fruit{[橘子, 火龙果]} //div)}
}这里传递的fruit实际上是传到了enhancedUserInfo里的NewComponent类中然后再通过props的方式传给OriginComponent. 原组件中仍然是通过props来接收这些数据
3. 高阶组件应用context的增强
照旧先创建theme-context
src/context/theme-context.js
import { createContext } from react
const ThemeContext createContext()
export default ThemeContextApp中应用子组件Product并用Context包裹子组件传递数据
class App extends PureComponent {render () {return (div{/* 使用新组件 */}ThemeContext.Provider value{{ color: red, size: 20 }}Product //ThemeContext.Provider/div )}
}子组件接收context数据的方式有两种指定context类型的只能接收一种context数据。所以一般通过consumer来接收多个context数据。之前的做法是在组件内部使用consumer 这样的会让组件可读性不高且不好维护。
利用高阶组件的做法在高阶组件中使用consumer然后将context数据注入原组件中。 (1) 定义高阶组件withTheme; src/hoc/with-theme.js:
import ThemeContext from ../context/theme-context
function withTheme (OriginComponent) {return (props) {return (ThemeContext.Consumer{value {// 通过props将context数据传给子组件return OriginComponent {...value} /}}/ThemeContext.Consumer)}
}
export default withTheme(2) 高阶组件在子组件向外暴露的时候拦截一下注入数据
import withTheme from ../hoc/with-theme
export class Product extends PureComponent {render () {return (// props接收数据。divProduct---color:{this.props.color}---size:{this.props.size}/div)}
}
export default withTheme(Product)4. 高阶组件应用登录鉴权
(1) 定义一个高阶组件。判断当前是否有token,有就说明登录了(登录就渲染界面)没有就没登录(没登录就返回提示信息)
src/hoc/login-auth .js
function loginAuth (OriginComponent) {// 返回一个函数式组件return (props) {const token localStorage.getItem(token)if (token) { // 登录则渲染该组件return OriginComponent /} else { // 没登录则给出提示信息return h2请先登录/h2}}
}
export default loginAuth(2) 哪个子组件需要登录鉴权就用高阶组件拦截一下 子组件Cart
import loginAuth from ../hoc/login-auth
export class Cart extends PureComponent {render () {return (divCart/div)}
}
export default loginAuth(Cart)(3) App中使用子组件 App中设置一个state数据isLogin用来渲染数据的变化。
class App extends PureComponent {...login () {localStorage.setItem(token, tom)// 设置isLogin变量的目的是确定登录修改数据能够重新调用render函数this.setState({ isLogin: true })// 如果没有isLogin可以调用强制刷新的API但是也不建议使用这个API// this.forceUpdate()}render () {return (divCart /button onClick{e this.login()}点击登录/button/div )}
}高阶函数里什么时候适合创建类组件什么适合适合创建函数组件。
5. 高阶组件应用生命周期劫持
通过生命周期来计算每个组件的挂载时间。 export class Detail extends PureComponent {UNSAFE_componentWillMount () {this.beginTime new Date().getTime()}componentDidMount () {this.endTime new Date().getTime()const interval this.endTime - this.beginTimeconsole.log(当前页面花费了${ interval }ms渲染完成!)}render () {...}}抽取到高阶组件中
// 可以对需要计算渲染时间的组件进行拦截
function logRenderTime (OriginComponent) {// 函数式组件没有生命周期所以返回一个类组件;// 由于是直接返回这个类所以类名可以省略 class NewComponent extends...return class extends PureComponent {UNSAFE_componentWillMount () {this.beginTime new Date().getTime()}componentDidMount () {this.endTime new Date().getTime()const interval this.endTime - this.beginTimeconsole.log(当前${ OriginComponent.name }页面花费了${ interval }ms渲染完成!)}render () {return OriginComponent {...this.props} /}}
}
export default logRenderTimeOriginComponent.name可以拿到组件的名字
应用在某个组件上
import logRenderTime from ../hoc/log_render_time
export class Detail extends PureComponent {...
}
export default logRenderTime(Detail)总结
高阶组件主要是方便代码的复用。 高阶组件中什么时候返回类组件什么时候返回函数式组件取决于是否
四、 Portals 某些情况下我们希望渲染的内容独立于父组件挂载到其他位置。甚至独立于当前挂载的DOM元素中。
!--比如当前除了root根节点还有第二个节点。通过Portals我们可以将内容挂载到root2中--div idroot/div!-- 新节点 --div idroot2/divApp.jsx createPortal(childcontainer)child是任何可渲染的React元素container是DOM元素也就是需要挂载的地方。
// 1. 引入createPortal函数
import { createPortal } from react-dom
export class App extends PureComponent {render () {return (divh1AppH1/h1{createPortal(h2App H2/h2, document.querySelector(#root2))}/div)}
}
export default App五、 Fragment组件
因为要求只能有一个根节点所以每次写结构都要包裹一个div。 当我们不想多一个div结构时可以采用Fragment
import React, { Fragment, PureComponent } from react
export class App extends PureComponent {render () {return (// div// h1没吃早饭/h1// h2没吃午饭/h2// h3没吃晚饭/h3// /divFragmenth1没吃早饭/h1h2没吃午饭/h2h3没吃晚饭/h3/Fragment)}
}Fragment标签可以用是用/代替(语法糖)。需要注意当需要在Fragment标签绑定key属性时不能采用语法糖的形式。 h1没吃早饭/h1h2没吃午饭/h2h3没吃晚饭/h3/六、 严格模式StrictMode
StrictMode于Fragment一样不会渲染到结构上面。主要用来显示程序中潜在的问题。严格模式的检查尽在开发模式下运行。
import React, { PureComponent, StrictMode } from react
export class App extends PureComponent {render () {return (div{/* 对Home及其后代元素开启严格模式 */}StrictModeHome //StrictModeProfile //div)}
}严格模式检查什么
(1) 识别不安全的生命周期检查是否使用过时的ref API
// Home.jsxUNSAFE_componentWillMount () {console.log(Home UNSAFE_componentWillMount)}render () {return (divh2 reftitleHome Title/h2{/* h2Home/h2 */}/div)
}严格模式下会报错提醒程序员避免一些隐藏的bug。 如果Profile组件使用这两个过时的API及生命周期函数仍可正常使用不会报错误。
(2) 检查副作用 严格模式检查下的组件的生命周期函数会被调用两次以检查此处的逻辑代码当被多次调用是是否会产生bug。在生产环境中是不会被调用两次的。 (3)检查是否使用其他废弃或过时(findDOMNode)的方法 给出警告
