react组件核心属性以及生命周期

介绍:

昨天学习了react的基础知识及其项目搭建,今天我们接着昨天的知识继续学习

官网地址: https://reactjs.bootcss.com/

如果大家时间比较充裕的话可以看一下尚硅谷老师的视频,讲的非常详细,非常适合新手入门链接:https://www.bilibili.com/video/BV1wy4y1D7JT?p=43&spm_id_from=pageDriver

模块与组件、模块化与组件化

模块

1. 理解：向外提供特定功能的js程序, 一般就是一个js文件
2. 为什么要拆成模块：随着业务逻辑增加，代码越来越多且复杂。
3. 作用：复用js, 简化js的编写, 提高js运行效率

组件

1. 理解：用来实现局部功能效果的代码和资源的集合(html/css/js/image等等)
2. 为什么要用组件： 一个界面的功能更复杂
3. 作用：复用编码, 简化项目编码, 提高运行效率

模块化

当应用的js都以模块来编写的, 这个应用就是一个模块化的应用

组件化

当应用是以多组件的方式实现, 这个应用就是一个组件化的应用

注意点:

1. 组件名必须首字母大写
2. 虚拟DOM元素只能有一个根元素
3. 虚拟DOM元素必须有结束标签

组件核心属性state

首先引入react相关插件

    <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

引入完成后看效果图

注意:

1. 组件中render方法中的this为组件实例对象
2. 组件自定义的方法中this为undefined，如何解决？
   a)强制绑定this: 通过函数对象的bind()
   b)箭头函数
3. 状态数据，不能直接修改或更新,

组件核心属性事件

1. 剪贴板事件

• onCopy
• onCut
• onPaste

2. 键盘事件

• onKeyDown
• onKeyPress
• onKeyUp

3. 焦点事件

• onFocus -
• onBlur

这些焦点事件工作在 React DOM 中所有的元素上 ，不仅是表单元素。

4. 表单事件

onChange onInput onSubmit

onChange事件经过React改良，内容改变时即可实时触发；而原生的需内容改变且失去焦点后触发才触发。

5. 鼠标事件

• onClick

• onContextMenu

• onDoubleClick

• onDrag

• onDragEnd

• onDragEnter

• onDragExit

• onDragLeave

• onDragOver

• onDragStart

• onDrop

• onMouseDown

• onMouseEnter

• onMouseLeave

• onMouseMove

• onMouseOut

• onMouseOver - –

• onMouseUp

onMouseEnter 和 onMouseLeave 事件从离开的元素传播到正在进入的元素，而不是普通的冒泡，并且没有捕获阶段；只有在鼠标指针穿过被选元素时，才会触发。

onMouseOut onMouseOver事件：不论鼠标指针穿过被选元素或其子元素，都会触发。

6、选择事件

onSelect

7、触摸事件

• onTouchCancel
• onTouchEnd
• onTouchMove
• onTouchStart

8、UI事件

onScroll

9、滚轮事件

onWheel

10、图像事件

onLoad onError

事件代码格式图

<button onClick={
   点击后触发的方法}>我是单击事件</button>

props

• props 父组件传递过来的参数(父传子)

props 与 state 的区别

1. state 的主要作用是用于组件保存、控制、修改 自己 的可变状态，在组件内部进行初始化，也可以在组件内部进行修改，但是组件外部不能修改组件的 state
2. props 的主要作用是让使用该组件的父组件可以传入参数来配置该组件，它是外部传进来的配置参数，组件内部无法控制也无法修改
3. state 和 props 都可以决定组件的外观和显示状态。通常，props 做为不变数据或者初始化数据传递给组件，可变状态使用 state

组件通信与数据流

在 React.js 中，数据是从上自下流动（传递）的，也就是一个父组件可以把它的 state / props 通过 props 传递给它的子组件，但是子组件不能修改 props - React.js 是单向数据流，如果子组件需要修改父组件状态（数据），是通过回调函数方式来完成的。