尚硅谷react课程-day03

&Mark&

已于 2022-10-13 22:19:11 修改

阅读量486

点赞数

文章标签： react.js javascript 前端

于 2022-10-12 21:47:36 首次发布

本文链接：https://blog.csdn.net/qq_64970126/article/details/127291480

版权

1、class类组件中自定义方法都是给事件作为回调去使用，当因为class类中具有严格模式会导致类中this的指向都不是组件而是未定义，而如何解决this指向目前只能使用.bind()方法因此为了解决代码冗杂采取简写

类似于this.changeWeather = this.changeWeather.bind(this)

2、类中可以直接写赋值语句，在react中就是往组件实例对象身上添加一个属性，让状态机语句可以不写到构造器当中了

3、解决代码冗杂办法：利用类中的赋值语句写一个箭头函数的方法，because箭头函数中不存在this指向，箭头函数中所使用的this都是来自函数作用域链，它的取值遵循普通普通变量一样的规则，在函数作用域链中一层一层往上找。而我们自定义的方法就是包涵在类组件当中的，因此就不存在自定义函数指向未定义

原型链上的props方法我们可以在ReactDOM.render渲染页面时虚拟dom参数中去定义一个键值对将外部的值传递给props方法里，然后在类组件.render时去直接调用

每个组件对象都会有props(properties的简写)属性 组件标签的所有属性都保存在props中通过标签属性从组件外向组件内传递变化的数据利用props接收组件标签中传递的值注意: 组件内部不要修改props数据

react中允许使用...对象的解构方法，但只允许在标签中使用，仅限于对

使用PropType方法需要引入react定义的props数据验证库

对于在渲染组件时的传递函数，props中类组件.propTypes上利用PropTypes.func进行限制，propTypes类组建

在 React 组件挂载之前，会调用它的构造函数。在为 React.Component 子类实现构造函数时，应在构造器中其他语句之前调用 super(props)。否则，this.props 在构造函数中可能会出现未定义的 bug。

构造器是否接收props，是否传递给super，取决于：是否希望在构造器中通过this访问props

5、组件三大核心属性3: refs与事件处理

React 中的 Refs提供了一种方式，允许我们访问 DOM节点或在 render方法中创建的 React元素，组件内的标签可以定义ref属性来标识自己，然后在类组件原型链上可以找到此方法通过调用方法对象中的值实际操作dom，就不需要使用JS原生写法去冗杂编写

关注