平远网站建设,医院行业网站,成都周边旅游景点大全,单页网站仿制教程1. 组件
函数式组件#xff08;适用于【简单组件】的定义#xff09; 示例#xff1a; 执行了ReactDOM.render(MyComponent/, ...)之后执行了什么#xff1f; React解析组件标签#xff0c;找到了MyComponent组件发现组件是使用函数定义的#xff0c;随后调用该…1. 组件
函数式组件适用于【简单组件】的定义 示例 执行了ReactDOM.render(MyComponent/, ...)之后执行了什么 React解析组件标签找到了MyComponent组件发现组件是使用函数定义的随后调用该函数将返回的虚拟DOM转为真实DOM随后呈现在页面中 类组件适用于【复杂组件】的定义 示例 执行了ReactDOM.render(, …)之后执行了什么 React解析组件标签找到了MyComponent组件发现组件是使用类定义的随后new出来该类的实例并通过该实例调用到原型上的render方法。将render返回的虚拟DOM转为真实DOM随后呈现在页面中 2. 组件三大核心属性1state类组件
1. 理解
state是组件对象最重要的属性值是对象可以包含多个key:value组合组件被称为’状态机’通过更新组件的state来更新对应的页面显示重新渲染组件
2. 强烈注意
组件中render方法中的this为组件实例对象组件自定义的方法中this为undefined如何解决 强制绑定this通过函数对象的bind()如下示例箭头函数见下方事件示例 状态数据不能直接修改或更新,必须用setState,且更新是一种合并不是替换 我们还要多考虑一个问题组件内渲染的次数 constructor 构造器调用几次 —— 1次render 调用几次 —— 1n 次 1是初始化的那次n是状态更新的次数changeWeather事件调用几次—— 点几次调用几次 示例 当然我们有简写
3. 组件三大核心属性2props
每个组件对象都会有props(properties的简写)属性组件标签的所有属性都保存在props中 如图
1. 作用
通过标签属性从组件外向组件内传递变化的数据注意组件内部不要修改props数据 示例
2. 编码操作
内部读取某个属性值this.props.name对props中的属性值进行类型限制和必要性限制
!-- 需要先引入prop-types.js对props传入的值进行限制 --
script src../js/prop-types.js/scriptPerson.propTypes {name: PropTypes.string.isRequiredage: PropTypes.number
}扩展属性 将对象的所以属性通过props传递MyPerson {...per} /默认属性值
Person.defaultProps {sex: 男,age: 15
}示例 组件类的构造函数(其实这函数可写可不写因为目前来说没必要)
constructor(props) {super(props)console.log(props) // 打印所有属性
}看一个实例 因为这个属性的限制是加在类身上的嘛所以给他定义成静态属性放在类内部提升便捷性就不把他放在类外部了否则类名一换欲哭无泪 所以函数组件内部还是只能在外部添加这么看来类组件还是很好的。但是后面随着hooks的到来函数组件成为主流那么如何对props进行限制就另外探究了下图附函数组件限制props
4. 组件三大核心属性2ref与事件处理
1. 理解
组件内的标签可以定义ref属性来标识自己
2. 编码 字符串形式的ref input refinput1 /最简单但不推荐 示例 回调形式的refinput ref{(c) this.input1 c} /也还不错 如图 createRef创建ref容器推荐
myRef React.createRef()
input ref{this.myRef} /如图
3. 事件处理
通过onXxx属性指定事件处理函数注意大小写 React使用的使自定义合成事件而不是使用的原生DOM事件——为了更好的兼容性React中的事件是通过事件委托方式处理的委托给最外层的元素——为了高效 通过event.target得到发生事件的DOM元素对象——不要过度使用ref 针对使用箭头函数说明一下 组件内的自定义事件放在哪里 —— Demo类的原型对象上供实例使用 eq1: 由于自定义事件是作为onClick的回调所以不是通过实例调用的是直接调用 类的方法默认开启了局部严格模式所以自定义事件中的this为undefined 可以打印this试一试 那我们如何解决呢 1. bind强制改变看上述state的示例 2. 箭头函数 示例
