培训网站建设多少钱修改wordpress版权信息

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

培训网站建设多少钱,修改wordpress版权信息,手机做视频的软件,任丘市建设局网站函数式组件定义及特点 定义#xff08;核心就是一个函数#xff0c;返回虚拟dom#xff09;#xff1a; import React from reactexport default function index() {return divindex/div }特点#xff1a; 1、适用于【简单组件】的定义2、是一个函数核心就是一个函数返回虚拟dom import React from reactexport default function index() {return divindex/div }特点 1、适用于【简单组件】的定义2、是一个函数返回虚拟dom3、函数名就是组件名 类式组件的定义及特点 学习之前可以先复习一下类相关的知识 ES6–class类详解/看完必会_class es6_suohs Blog的博客-CSDN博客 或者通过下面代码复习要用到的类的知识点认真看、有帮助 !DOCTYPE html html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title /headbodyscript/*** 总结* 1、类中的构造器不是必须写的要对实例进行一些初始化的操作如添加指定属性时才写* 2、如果A类继承了B类且A类中写了构造器那么A类构造器中的super是必须要调用的* 3、类中所定义的方法都是放在了类的原型对象上供实例使用*/// 创建一个Person类class Person {// 构造器方法接收参数constructor(name, age) {// 构造器中的this是谁—是类的实例对象p1/p2this.name namethis.age age}// 一般方法speak() {// speak方法放在了哪里–Person的原型对象上供实例使用// 通过Person实例(p1/p2)调用speak时speak中的this就是Person实例console.log(我的名字是\({this.name},我的年龄是\){this.age})}}// 创建一个Person的实例对象const p1 new Person(小锁, 19)const p2 new Person(小索, 20)p1.speak() //实例p1调用Person类原型链上的方法speakp2.speak() //实例p2调用Person类原型链上的方法speakp1.speak.call({a: 1,b: 2}) //使用call调用改变this指向传的是谁this就指向谁// 创建一个Student类继承于Person类class Student extends Person {// 这里不需要接收s1传过来的姓名和年龄参数因为我们继承了Person// Person里面接收了这两个参数下面我们只需要接收年级就好了constructor(name, age, grade) {// 下面写法不可取因为属性多的时候会和父类的赋值重复非常冗余// this.name name// this.age age// 因此我们利用super关键字帮助我们在子类中调用父类// 将父类接收的2个参数传递过去即可// 注意super关键字必须写在最前面不能处于this.grade grade之后super(name, age)this.grade grade}// 重写从父类继承过来的方法speak() {console.log(我的名字是\({this.name},我的年龄是\){this.age},我的年级是${this.grade})}// 一般方法study() {// study方法放在了哪里–类的原型对象上供实例使用// 通过Student实例s1调用speak时speak中的this就是Student实例console.log(我的名字是\({this.name},我的年龄是\){this.age})}}const s1 new Student(小美, 19, 大学)console.log(s1)// 如果自身不存在学生也能访问到父类的speak方法原型链的原因s1.speak()/script /body/htmll 特点 1、适用于【复杂组件】的定义2、组件是用类定义的随后new出来该类的实例并通过该实例调用到原型上的render方法3、将render返回的虚拟dom转为真实dom呈现在页面中 定义方式 import React, { Component } from react // 创建类式组件 export default class index extends Component {// render是放在哪里的–在index组件的原型对象上供实例使用// render的this是谁–在index组件的实例对象index组件实例对象render() {console.log(this)return divindex/div} }我们打印一下this输出的是组件的实例对象。 补充1什么是复杂组件 复杂组件就是有状态state的组件就叫复杂组件  除了使用外部数据 (通过 this.props 访问)以外组件还可以维护其内部的状态数据 (通过 this.state 访问)。当组件的状态数据改变时组件会再次调用 render() 方法重新染对应的标记。  补充2什么是 state状态? state 是组件对象最重要的属性,值是对象(可以包含多个 key-value 的组合)组件被称为状态机通过更新组件的 state 来更新对应的页面显示(重新染组件)react 里只需更新组件的 state然后根据新的 state 重新渲染用户界面不要操作 DOM。 state中的值可以修改修改的唯一方法是调用 this.setState后面会讲 ,每次修改以后自动调用 this.render 方法再次渲染组件。 也就是说直接this.state.num 2这样直接修改值是无效的state在组件的构造函数中赋值  举个例子让页面根据state中的值来进行变化。 假如我们想给state里面放入一个week参数注意state 的值是对象(可以包含多个 key-value 的组合)步骤如下 可以看到传入成功 读取state的值直接this.state.xxx即可 也可以利用解构赋值简化代码 那我们想要通过点击事件动态改变这个属性如何处理下面来讲react中的事件绑定 补充3react中的事件绑定 react中的事件绑定呢跟原生js及其相似只不过在原生的基础上添加了一点点区别、 例如事件命名方式原生onclick –react是onClick 、原生onblur –react是onBlur等。 React事件的命名采用的是小驼峰式, 例如(onClick),而不是纯小写(onclick)使用JSX语法的时候,需要传入一个函数作为事件处理函数,而不是一个字符串 试一下 页面报错了看来用个字符串确实不行  翻译过来说是onClick必须是个函数而不是字符串 好吧。挺多事的、看来得用花括号包裹才能保证他是一个函数 法一点击事件写在render里面 注意如果在标签的函数里面直接添加了小括号那么他就会一上来就开始调用。 因此需要把小括号去掉这样就完美了 这时有人可能会发现我上面函数 testFunc的定义 是位于render里面。 法二当然还有一种写法就是将函数写在外面推荐两者的区别往下看 补充4react事件函数写在render里外的区别  React的事件函数可以写在render里外但是它们的区别在于 1、写在render里的事件函数可以跟随渲染周期每次重新实例化这样可以保证它们的最新状态而写在render外的事件函数只在第一次加载时被实例化不能保证最新状态。2、写在render里的事件函数可以被重新实例化可以保证它们具有最新的props和state而写在render外的事件函数只能获取它们在第一次加载时的props和state不能保证最新的props和state。3、写在render里的事件函数可以和render的内容组合在一起可以实现更好的可读性和维护性而写在render外的事件函数可以使代码结构更加清晰可以使代码更易读。4、写在render里的事件函数需要加上function且调用时需要加上this写在render外的事件函数不需要加function调用时也不需要加this。5、由于在render里调用this.setState事件会陷入死循环原因是参考博主react 中千万不要在render里调用this.setState_render里面写setstate_小刘先生很努力的博客-CSDN博客。因此我们在大部分场景中还是推荐写在render外。 总之写在render里和写在render外的事件函数各有优缺点在使用时要根据实际情况来选择。 问题来了现在我们已经可以实现点击事件了那我想在点击的时候改变state中的week值如何写有人说直接赋值就好了呀 看下效果当我点击的一下之后报错了说state未定义这说明通过this没找到state呀。 大胆推测this指向出现了问题。 补充5如何修改类中方法的this指向 那构造器的this以及render中的this均指向index组件实例怎么就函数的this出现了undefined 1因为类中定义的方法已经在局部开启了严格模式 2只有通过实例调用的才会正常而testFunc是作为onClick的回调所以不是通过实例调用的是直接调用所以this指向为undefined 所以接下来我们只能改变this指向来让他指向index组件实例如何解决 改变this指向的方法有apply call 箭头函数 bind都试下 call和apply都试了下都是一上来就执行所以不可行 注意bind是返回对应函数便于稍后调用apply、call则是立即调用 。             还有箭头函数文章后面代码精简的时候会讲解到 因此我们得用bind 重点是这一句this.testFunc this.testFunc.bind(this) 代表的含义就是将原型上的testFunc函数通过bind改变this指向使其指向index组件实例返回一个新的函数重新赋值给testFunc函数这样testFunc函数的this指向就正常了、 此时就打印出正常的this信息了、 补充6解决了this指向如何通过this去改变state中数据的值 解决了this指向我们重新在方法中访问state值就不会报错了。 state值修改成功了可页面怎么没变 注意不可以直接对state中的数据直接进行修改this.state.week 周二 【错误写法】。要借助内置API【setState】进行修改 这样就正常了、  补充7contructor调用几次render调用几次 答 contructor只调用一次render会调用1n次 1是初始化的那次n是状态更新的次数 小总结 1、构造器的作用 初始化状态解决类方法的this指向问题 2、render的作用 从状态state里面读取数据根据状态进行页面展示 代码简化一 在上面的关于类的复习里面已经讲了构造器的作用主要是用于接收外部传进来的参数当我们不需要接收外部传进来的值时是可以不用构造器的。而且需要注意类中是可以直接写赋值语句的但不能随意写代码类始终不是函数体函数体中可以定义变量、打印等类中不允许 因此我们可以把构造器中的state赋值语句放入类中 代表给实例对象index追加了一个属性state 代码简化二  当函数特别多的时候我们可能会再构造器中写多个改变this指向的语句十分冗余 改变this指向的方法还有一个是箭头函数、、、、 这样构造器就可以删了简化之后 import React, { Component } from react // 创建类式组件 export default class index extends Component {// 初始化状态state {week: 周一,}render() {const { week } this.statereturn h2 onClick{this.testFunc}今天才{week}/h2}// 自定义方法–要用赋值语句的形式箭头函数testFunc () {this.setState({week: 周二,})} } 终于结束了这是一个更改react组件页面上的数据引发的一系列问题讲解。希望大家可以认真阅读绝对有帮助~