北京移动端网站建设网页制作培训好学吗

当前位置： 首页 > news >正文

北京移动端网站建设,网页制作培训好学吗,广州自适应网站建设,济南建设工程信息网官网前言 hooks是react16.8.0版本新增加的新特性/新语法#xff0c;最大的特点是可以在开发者在函数组件中使用state以及其它React特性#xff0c;下面分别对其介绍#xff5e; React.useState() state hook能让函数组件也可以拥有state状态#xff0c;方便其进行state状态的…前言 hooks是react16.8.0版本新增加的新特性/新语法最大的特点是可以在开发者在函数组件中使用state以及其它React特性下面分别对其介绍 React.useState() state hook能让函数组件也可以拥有state状态方便其进行state状态的读写操作 React.useState()方法的参数为第一次初始化state的值返回一个包含两个元素的数组第一个为内部当前状态值另一个参数是更新状态值的函数 const [xxx, setXXX] React.useState(initValue) setXXX方法有两种写法 setXXX(newValue) // 非函数参数直接将此值作为新的state值 setXXX(value newValue) // 函数作为参数接收原来的状态值返回新的状态值 setXXX方法会自动将内存中储存的state值进行更新 // components/Students.jsx import React from reactexport default function Students() {const [msg, setMsg] React.useState({name: 小明, age: 12})const [grade, setGrade] React.useState(99) // 可通过useState传递多个状态function show() {// setMsg({name: 小红, age: 13}) // 直接将新的状态值返回setMsg((old) ({name: 小红, age: old.age1})) // 参数返回新的状态值可对旧状态值进行操作}function change() {setGrade(100)}return (divh2这是学生信息/h2h3姓名{msg.name}/h3h3年龄{msg.age}/h3h3成绩{grade}/h3button onClick{show}更改学生信息/buttonbutton onClick{change}更改学生成绩/button/div) }React.useEffect() Effect hook可以让你在函数组件中使用达到使用声明周期函数效果 useEffect(() {// 做一些操作return () { // 如果写了return则该函数可以在卸载前被调用// 相当于类组件中的componentWillUnmount} },[stateValue] // 此处若指定了stateValue则就会在组件render和更新时被调用若指定为空数组时则只在渲染时被调用 ) 可以讲useEffect hook看作是三个声明函数的组合 componentDidMount() componnetDidUpdate() componentWillUnmount() import React from react // import ReactDOM from react-dom; import {root} from ../indexexport default function Test() {const [number, setNumber] React.useState(0)function add() {setNumber(value value1)}function destory() {root.unmount()} React.useEffect(() {const timer setInterval(() {setNumber(value value1)}, 500)return () {clearInterval(timer)} },[])return (divspantest组件/spanspan数值是{number}/spanbutton onClick{add}点我加一/buttonbutton onClick{destory}销毁组件/button/div) } React.useRef() ref hook可以在函数组件中保存标签对象功能与类组件标签中的React.createRef()一样React教程详解一props、state、refs、生命周期_迷糊的小小淘的博客-CSDN博客 const xxxRef React.useRef() // 定义一个ref在标签中标记只需使用refxxxRef即可取值利用xxxRef.current import React from reactexport default function Students() {const [msg, setMsg] React.useState({name: 小明, age: 12})const ageRef React.useRef() // 定义标签reffunction show() {alert(ageRef.current.innerText); // 取值}return (divh2这是学生信息/h2h3姓名{msg.name}/h3h3 ref{ageRef}年龄{msg.age}/h3button onClick{show}显示学生年龄/button/div) } 其它关于路由的hooks已在上一篇文章中讲过请移步React教程详解二脚手架、路由_迷糊的小小淘的博客-CSDN博客 PureComponent 在使用类组件式会继承于React的Component组件该组件存在两个问题 只要执行setState()即使不改变状态数据组件也会重新渲染render若当前组件重新render即使子组件并未发生任何变化也会重新渲染 这两个问题导致组件经常被渲染导致效率低下因此想要让其当组件的props或state数据发生变化时才重新渲染 导致此问题的原因在于Component中的shouldComponentUpdate()总是返回true因此要让其有选择性的进行返回有两种方法可以做到 重写每个组件的shouldComponentUpdate(nextProps, nextState)方法该方法接收未来的props和state将其与目前的state/props进行比较若发生改变才返回true否则为false import React, { Component } from reactexport default class Students extends Component {state {name: 小明, age: 10}show () {this.setState({name: 小明, age: 11})}shouldComponentUpdate(nextProps, nextState) {return !(nextState.name this.state.name nextState.age this.state.age)}render() {console.log(是否被渲染); // state中age改变了所以此行会被输出const {name, age} this.statereturn (divh2这是学生信息/h2h3姓名{name}/h3h3年龄{age}/h3button onClick{this.show}显示学生年龄/button/div)} } 使用PureComponent替换Component,PureComponent重写了shouldComponentUpdate方法保证组件只有在state或者props变化的时候返回true当然是进行了浅比较所以若直接修改了state也是会引起页面渲染的 import React, { PureComponent } from reactexport default class Students extends PureComponent {state {name: 小明, age: 10}show () {this.setState({name: 小明, age: 10})}render() {console.log(是否被渲染); // state中age未改变所以此行不会被输出const {name, age} this.statereturn (divh2这是学生信息/h2h3姓名{name}/h3h3年龄{age}/h3button onClick{this.show}显示学生年龄/button/div)} } 开发中常用第二种方法提高运行效率 Context组件通信 Context也是一种组件通信方式常用于【祖组件】与【后代组件】通信但还是redux香哈哈哈哈 使用时要先创建一个Context对象 const xxxContext React.createContext() // 创建Contex容器对象 主要利用Context对象上的Provider与Consume两个标签  在后代组件外部包裹xxxContext.Provider并在该标签上添加value属性此值即为要传给【后代组件】的数据 const {Provider} xxxContext // 在祖组件中使用ProviderProvider value{{school: 清华}}子组件 /Provider // 包裹后代组件 【后代组件】读取数据有两种方式 在要接收数据的子组件声明static变量再读取—适用于类组件 static contextType xxxContext // 声明接收context this.context // 读取context中value数据 使用Consumer组件获取数据—-类组件与函数组件都可以使用 const { Consumer } xxxContext // 在子组件中使用ConsumerConsumer{value { // value就是context中的value数据// 要展示的内容}} /Consumer 示例 ①子组件是类组件形式 // pages/School.jsx import React, { Component } from react import Teacher from ./Teacher import { SchoolContext } from ./Students // 因为要先加载子组件所以将创建context定义在子组件上在祖组件上引入 export const {Provider, Consumer} SchoolContextexport default class School extends Component {state {school: 清华,base: 北京}render() {const {school, base} this.statereturn (div style{{backgroundColor: blue, padding: 10px}}h1这是学校{school}/h1Provider value{{school, base}} // 利用value传过去数据Teacher //Provider/div)} }// pages/Teacher.jsx import React, { Component } from react import Students from ./Students export default class Teacher extends Component {render() {return (div style{{backgroundColor: yellow, padding: 10px}}h2这是老师/h2Students //div)} }//pages/Students.jsx import React, { Component } from react export const SchoolContext React.createContext() // 创建context对象并暴露出去 export default class Students extends Component {static contextType SchoolContextrender() {const {school, base} this.context // 传过来的参数放在组件实例对象的context里return (div style{{backgroundColor: orange, padding: 10px}}h2该生来自{base}的{school}/h2/div)} } ②子组件是函数组件形式 // pages/School.jsx import React, { Component } from react import Teacher from ./Teacher import { Provider } from ./Students // 引入context对象中的Providerexport default class School extends Component {state {school: 清华,base: 北京}render() {const {school, base} this.statereturn (div style{{backgroundColor: blue, padding: 10px}}h1这是学校{school}/h1Provider value{{school, base}}Teacher //Provider/div)} }// pages/Teacher.jsx import React, { Component } from react import Students from ./Students export default class Teacher extends Component {render() {return (div style{{backgroundColor: yellow, padding: 10px}}h2这是老师/h2Students //div)} }// pages/Students.jsx import React, { Component } from reactexport const SchoolContext React.createContext() // 创建context对象并暴露出去 export const {Provider, Consumer} SchoolContext // 主要是为了暴露出Provider供祖组件使用export default function Students() {return (div style{{backgroundColor: orange, padding: 10px}}Consumer {value { // value相当于this.context直接取里面的数据即可return (h2该生来自{value.base}的{value.school}/h2)}}/Consumer/div) } react中组件通信方式主要有如下四种方式 props消息订阅与发布机制如pubsub-js集中式状态管理如redux生产者消费者模式如conText错误边界 错误边界error boundary用来捕获后代组件在生命周期内产生的错误从而渲染备用页面 通常利用getDerivedStateFromError与componentDidCatch非必需配合达到效果两个函数均要定义在父组件中用于监测容易出错的子组件 import React, { Component } from reactexport default class Parents extends Component {state {hasError: } // 表示子组件是否有错// 在父组件中定义错误边界当子组件在生命周期中报错时会调用该函数static getDerivedStateFromError(error) {return {hasError: error}}componentDidCatch() {// 该函数可以不写此处一般用于统计出错次数}render() {return (divspan这是parents组件/span{/* 判断容易报错的子页面 /}{this.state.hasError ? span页面出错了。。。或者此处放一个精心做好的报错页面/span: Son /}/div)} } class Son extends Component {state {}render() {return (divspan这是son组件/spanspan{this.state.name.name}/span{/ 请求了一个不存在的数据会报错 /}/div)}} children props与render props 之前所有讲过的例子中三级组件使用都是采用如下方式 // 祖组件中调用父组件 // 父组件中调用子组件 若想采用在祖组件中直接调用父组件和子组件方式应该采用什么方式呢以上述讲解context中三个组件为例 通过props中children标签属性传递 // pages/School.jsx import React, { Component } from react import Teacher from ./Teacher import Students from ./Studentsexport default class School extends Component {state {school: 清华,base: 北京}render() {const {school, base} this.statereturn (div style{{backgroundColor: blue, padding: 10px}}h1这是学校{school}/h1TeacherStudents / // 将子组件作为标签体内容传入/Teacher/div)} }// pages/Teacher.jsx import React, { Component } from react export default class Teacher extends Component {render() {return (div style{{backgroundColor: yellow, padding: 10px}}h2这是老师/h2{/ 标签体中的内容通过this.props.children拿到此时代表Students组件 /}{this.props.children} /div)} }// pages/Students.jsx正常写组件即可该种方法利用了组件标签标签体中传递的方式和一般组件不同的是组件标签的标签体不会被主动渲染需要在组件中对应位置声明{this.props.children} 进行接收才会展示~ 该种方式没法传递数据给子组件所以引入下面方式 通过props中render方法 组件标签可以传递render props属性渲染组件且可以传递参数相当于在父组件中做了占位可以任意调用子组件。类似于vue中的插槽方法~ render属性为函数形式接收传给子组件的参数一般返回一个组件在父组件中对应位置调用render方法并传递给父组件的参数实现父子间通信即为{this.props.render(xx参数1xx参数2…., xx参数n)} // pages/School.jsx import React, { Component } from react import Teacher from ./Teacher import Students from ./Studentsexport default class School extends Component {render() {return (div style{{backgroundColor: blue, padding: 10px}}h1这是学校/h1{/ 通过render属性实现父子组件关系,通过prop传递参数/}Teacher render{({teacherName, subject}) Students teacherName{teacherName} subject{subject}/} //div)} }// pages/Teacher.jsx import React, { Component } from react export default class Teacher extends Component {state {teacherName: 小李,subject: 语文} render() {const {teacherName, subject} this.statereturn (div style{{backgroundColor: yellow, padding: 10px}}h2这是老师/h2{/ 在展示位置使用{this.props.render渲染子组件} /}{this.props.render({teacherName, subject})}/div)} }// pages/Students.jsx import { Component } from react export default class Students extends Component {render() {return (div style{{backgroundColor: orange, padding: 10px}}{/ 利用props接收参数 */}h2该生的{this.props.subject}老师是{this.props.teacherName}/h2/div)} } 做笔记是真不容易啊(灬ꈍ ꈍ灬)