前言
React的简介：React 是一个声明式，高效且灵活的用于构建用户界面的 JavaScript 库。使用 React 可以将一些简短、独立的代码片段组合成复杂的 UI 界面，这些代码片段被称作“组件”。
提示：以下是本篇文章正文内容，下面案例可供参考
一、React基本理解和使用
1. 使用React开发者工具调试
进不了谷歌商店的朋友们也不用担心，我这边已经打包好了,React Developer Tools，下载之后自己解压拖进来就行了。
2. 组件的基本使用
第一种方式：函数式组件
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>函数式组件</title>
</head>
<body>
<!-- 准备好一个“容器” -->
<div id="test"></div>
<!-- 引入react核心库 -->
<script src="https://cdn.bootcdn.net/ajax/libs/react/17.0.2/umd/react.development.min.js"></script>
<!-- 引入react-dom，用于支持react操作DOM -->
<script src="https://cdn.bootcdn.net/ajax/libs/react-dom/17.0.2/umd/react-dom.development.min.js"></script>
<!-- 引入babel，用于将jsx转为js -->
<script src="https://cdn.bootcdn.net/ajax/libs/babel-core/6.1.9/browser.js"></script>
<script type="text/babel">
//1.创建函数式组件
function MyComponent(){
console.log(this); //此处的this是undefined，因为babel编译后开启了严格模式
return <h2>我是用函数定义的组件(适用于【简单组件】的定义)</h2>
}
//2.渲染组件到页面
ReactDOM.render(<MyComponent/>,document.getElementById('test'))
/*
执行了ReactDOM.render(<MyComponent/>.......之后，发生了什么？
1.React解析组件标签，找到了MyComponent组件。
2.发现组件是使用函数定义的，随后调用该函数，将返回的虚拟DOM转为真实DOM，随后呈现在页面中。
*/
</script>
</body>
</html>
第二种方式：类式组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2_类式组件</title>
</head>
<body>
<!-- 准备好一个“容器” -->
<div id="test"></div>
<!-- 引入react核心库 -->
<script src="https://cdn.bootcdn.net/ajax/libs/react/17.0.2/umd/react.development.min.js"></script>
<!-- 引入react-dom，用于支持react操作DOM -->
<script src="https://cdn.bootcdn.net/ajax/libs/react-dom/17.0.2/umd/react-dom.development.min.js"></script>
<!-- 引入babel，用于将jsx转为js -->
<script src="https://cdn.bootcdn.net/ajax/libs/babel-core/6.1.9/browser.js"></script>
<script type="text/babel">
//1.创建类式组件
class MyComponent extends React.Component {
render(){
//render是放在哪里的？—— MyComponent的原型对象上，供实例使用。
//render中的this是谁？—— MyComponent的实例对象 <=> MyComponent组件实例对象。
console.log('render中的this:',this);
return <h2>我是用类定义的组件(适用于【复杂组件】的定义)</h2>
}
}
//2.渲染组件到页面
ReactDOM.render(<MyComponent/>,document.getElementById('test'))
/*
执行了ReactDOM.render(<MyComponent/>.......之后，发生了什么？
1.React解析组件标签，找到了MyComponent组件。
2.发现组件是使用类定义的，随后new出来该类的实例，并通过该实例调用到原型上的render方法。
3.将render返回的虚拟DOM转为真实DOM，随后呈现在页面中。
*/
</script>
</body>
</html>
3. 注意事项
- 组件名必须首字母大写
- 虚拟DOM元素只能有一个根元素
- 虚拟DOM元素必须有结束标签
二、React组件的核心一：state
1. 理解
- state是组件对象最重要的属性, 值是对象(可以包含多个key-value的组合)
- 组件被称为"状态机", 通过更新组件的state来更新对应的页面显示(重新渲染组件)
2. 强烈注意
- 组件中render方法中的this为组件实例对象
- 组件自定义的方法中this为undefined，如何解决？
- 强制绑定this: 通过函数对象的bind()
- 箭头函数 - 状态数据，不能直接修改或更新
三、React组件的核心二: props
1. 理解
- 每个组件对象都会有props(properties的简写)属性
- 组件标签的所有属性都保存在props中
2. 作用
- 通过标签属性从组件外向组件内传递变化的数据
- 注意: 组件内部不要修改props数据
3. 拓展
- 内部读取某个属性值
this.props.name
- 对props中的属性值进行类型限制和必要性限制
PropTypes这个对象是要引入prop-types.js库的
ClassName.propTypes = {
name: PropTypes.string.isRequired,
age: PropTypes.number,
sex:PropTypes.string,
}
- 扩展属性: 将对象的所有属性通过props传递
<Person {...person}/>
- 默认属性值：
ClassName.defaultProps = {
age: 18,
sex:'男'
}
- 组件类的构造函数
constructor(props){
super(props)
console.log(props)//打印所有属性
}
四、React组件的核心三: refs与事件处理
1. 理解
组件内的标签可以定义ref属性来标识自己
2. 编码
- 字符串形式的ref
<input ref="input1"/>
- 回调形式的ref
<input ref={(c)=>{this.input1 = c}}
- createRef创建ref容器·
myRef = React.createRef()
<input ref={this.myRef}/>
3. 事件处理
- 通过onXxx属性指定事件处理函数(注意大小写)
- React使用的是自定义(合成)事件, 而不是使用的原生DOM事件
- React中的事件是通过事件委托方式处理的(委托给组件最外层的元素)
- 通过event.target得到发生事件的DOM元素对象
五、生命周期
1. 理解
- 组件从创建到死亡它会经历一些特定的阶段。
- React组件中包含一系列勾子函数(生命周期回调函数), 会在特定的时刻调用。
- 我们在定义组件时，会在特定的生命周期回调函数中
2.生命周期流程图(旧)
生命周期的三个阶段（旧）
- 初始化阶段: 由
ReactDOM.render()触发—初次渲染
- constructor() 构造器
- componentWillMount() 组件将要挂载的钩子
- render() 渲染
- componentDidMount() 组件挂载完毕的钩子
- 更新阶段: 由组件内部this.setSate()或父组件重新render触发
- shouldComponentUpdate() 控制组件更新的“阀门”
- componentWillUpdate() 组件将要更新的钩子
- render() 渲染
- componentDidUpdate() 组件更新完毕的钩子
- 卸载组件: 由ReactDOM.unmountComponentAtNode()触发
- componentWillUnmount() 组件将要卸载的钩子
3. 生命周期流程图(新)
生命周期的三个阶段（新）
- 初始化阶段: 由ReactDOM.render()触发—初次渲染
- constructor()
- getDerivedStateFromProps
- render()
- componentDidMount()
- 更新阶段: 由组件内部this.setSate()或父组件重新render触发
- getDerivedStateFromProps
- shouldComponentUpdate()
- render()
- getSnapshotBeforeUpdate
- componentDidUpdate()
- 卸载组件: 由ReactDOM.unmountComponentAtNode()触发
- componentWillUnmount()
总结
1. 本篇文章讲解了React的插件，还有创建组件的方式，还有React的三大核心点，并且也说了一下React的生命周期。
2. React 中文网，这是官方文档，写的并不是很仔细。
3. 希望会对你有帮助，不喜勿喷。