本文深入浅出地介绍了React的基础知识，包括jsx语法、组件的概念、元素渲染、props的使用、生命周期管理和state，以及事件处理。通过实例演示了如何安装环境、创建组件并传递props，以及关键的生命周期函数和状态管理技巧。
React基础
主要内容
1、jsx语法
2、组件
3、 元素渲染
4、 props
5、生命周期和state
6、事件
学习目标
react介绍，工具安装，环境搭建
React介绍
React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。由于 React 的设计思想极其独特，属于革命性创新，性能出众，代码逻辑却非常简单。所以，越来越多的人开始关注和使用
React主要是用于构建用户界面的 JavaScript 库，实现单页面应用。
特点：声明式设计（采用声明范式）、高效、灵活、JSX语法、组件、单向响应的数据流、数据双向绑定
react中文网：https://react.docschina.org/
工具
谷歌react调试工具：react develpoer tools，用于调试react
redux调试工具：redux devTools，用于调试redux
markdown文本，创建的文件后缀是.md结尾的，是在github，npm,码云等代码托管平台上使用一种文本格式，在这种网站上会自动展示.md文件的内容，主要是说明功能
安装
npx create-react-app my-app
通过这个指令一键搭建react环境，基于webpack的
cd my-app 进入文件夹
npm start 启动
复制空白环境
复制已经下载好的空白环境到目标位置
cd my-app 进入文件夹
cnpm i 安装
npm start 启动
本节作业：
1、安装react环境
2、安装chrome插件
jsx语法、元素渲染、组件和props
jsx语法
1、介绍：HTML 语言直接写在 JavaScript 语言之中，不加任何引号，这就是 JSX（JavaScript and XML） 的语法，JSX是一种 JavaScript 的语法扩展，它允许 HTML 与 JavaScript 的混写。
2、语法是：
1）
2）{str} : 遇到{}就按js解析，{}中的js代码不要直接出现{}
3、JSX 是一个表达式，可以在 if 语句和 map循环的代码块中使用 JSX，将 JSX 赋值给变量，把 JSX 当作参数传入，以及从函数中返回 JSX
4、JSX属性
1）使用引号来定义以字符串为值的属性
const element = <div tabIndex="0"></div>;
2）使用大括号来定义以 JavaScript 表达式为值的属性
const element = <img src={user.avatarUrl}></img>;
3）style样式使用JSX，写法如下：
<div style={{ color:"red" ,fontSize:"30px"}}></div>
【示例1-1】if语句中使用
function getGreeting(user) {
if (user) {
return <h1>Hello, {formatName(user)}!</h1>;
}
return <h1>Hello, Stranger.</h1>;
}
【示例1-2】循环结构中使用
function getGreeting(data) {
return(
<ul>
{data.map(function(ele,index){
return <li key={ index }> { ele } </li>
}}
</ul>
)
}
.map(function(ele,index){
return 返回值
})
数组的一个遍历方法,ele是数组元素项，index是下标，return后是返回值
【示例1-3】jsx赋值给变量
class News extends React.Component{
constructor(){
super();
this.state={
flag:true
uname:’kevin’
}
}
render(){
let dom=’’;
if(this.state.flag){
dom=<p>欢迎回来,{this.state.uname}</p>
}else{
dom=<p>请登录</p>
}
}
}
元素渲染
元素描述了你在屏幕上想看到的内容，是构成 React 应用的最小砖块，与浏览器的 DOM 元素不同，React 元素是创建开销极小的普通对象。React DOM 会负责更新 DOM 来与 React 元素保持一致。
语法：ReactDOM.render(element,parentNode)
说明：1.参数1：element为要显示的元素。可以是双标签形式的，也可以是单标签形式的，如果是单标签必须有结束符号
2.参数2：parentNode为元素要显示在页面的哪个标签中。
3.渲染方法一般一个项目中只有一个。其他页面通过组件引入或者路由访问。
4.更新已渲染的元素:React 元素是不可变对象。一旦被创建，你就无法更改它的子元素或者属性。一个元素就像电影的单帧：它代表了某个特定时刻的 UI。更新 UI 唯一的方式是创建一个全新的元素，并将其传入 ReactDOM.render()
【示例1-4】渲染元素
function tick() {
const element = (
<div>
<h1>Hello, world!</h1>
<h2>It is {new Date().toLocaleTimeString()}.</h2>
</div>
);
ReactDOM.render(element , document.getElementById('root'));
}
setInterval(tick, 1000);
组件
概念：
从概念上类似于 JavaScript 函数。它接受任意的入参（即 “props”），并返回用于描述页面展示内容的 React 元素。组件允许你将 UI 拆分为独立可复用的代码片段，并对每个片段进行独立构思。
创建方式：
1、函数形式
function Index(){
<!-- 页面结构 -->
return <div><h1>hello react</h1></div>
}
2、类形式
class Home extends React.Component{
<!-- 页面结构 -->
render(){
return(
<div>
<h2>home页面</h2>
</div>
)
}
}
组件的导出
组件的导出使用es6模块的导出语法。可以使用 export default 组件名，也可以使用 export {组件名}
组件的引入
组件的引入实现es6模块的引入语法。可以使用 import 组件名 from ‘组件路径’
注意：
1、组件名称首字母必须大写
2、组件的页面结构只能有一个顶层标签,不能出现兄弟关系，页面如果比较复杂，需要使用小括号包裹起来
组件和props
当 React 元素为用户自定义组件时，它会将 JSX 所接收的属性（attributes）转换为单个对象传递给组件，这个对象被称之为 “props”。
语法：
父组件中：调用子组件时通过属性形式传递
<Head msg={"父组件传递的数据"} id='123'>
子组件中：通过props接受
class Head extends React.Component{
render(){
return(
<div>{this.props.msg}</div>
)
}
}
props是只读属性
【示例1-5】props 父组件向子组件传递数据
function Welcome(props) {
//props.name = ‘newValue’; 这句会报错，因为props是只读属性，不能重新复制
return <h1>Hello, {props.name}</h1>;
}
const element = <Welcome name="Sara" />;
ReactDOM.render(
element,
document.getElementById('root')
)
本节作业：
1.练习创建组件，导出组件，引入组件
2.练习父级通过props向子集传递数据
生命周期函数和state
生命周期
1.什么是生命周期函数：我们可以为 class 组件声明一些特殊的方法，当组件挂载或卸载时就会去执行，这些方法这些方法叫做“生命周期方法”
2.react中的生命周期函数(7个)
componentWillMount ：组件将要被渲染
componentDidMount : 组件渲染完成(组件进入运行状态)
shouldComponentUpdate : 是否允许组件更新(这个函数中必须有返回值，如果返回true，表示允许更新；如果返回false，表示不允许更新)
componentWillUpdate : 组件将要开始更新
componentDidUpdate : 组件更新完成(重新进入运行状态)
componentWillReceiveProps : 组件接收props更新
componentWillUnMount : 组件将要卸载
组件有三个生命周期函数一生只触发一次：
componentWillMount
componentDidMount
componentWillUnMount
3.生命周期流程图
this
1.在react组件的生命周期函数中，this指向当前组件
2.在react class定义的组件中，constructor构造方法中需要通过调用super()方法生成this，这时this指向当前组件；否则不存在this，使用会报错。
3.在react 组件中，自定义function函数中this默认指向undefined
state
概念:
组件内部的状态，内部状态只能在组件内部使用
定义方法：
1.函数形式的组件如果不使用HOOK新语法，是不能使用state的
2.class定义的组件中使用：
class Head extends React.Component{
constructor(){
super()
<!-- 声明state -->
this.state={
flag:true,
hide:false
}
}
render(){
return(
<div>{this.props.msg}</div>
)
}
}
使用state
this.state.属性名调用
本节作业
\1. 默写生命周期函数名
\2. 初始化state状态
\3. 在页面中使用state
事件
绑定方式：
1.在标签绑定,使用的属性方式
2.事件是以 “on+ 事件名称” 组成 ,使用驼峰命名法
3.事件的功能一般定义在外部，事件这里写this.事件函数名称
<button onClick={this.functionName}></button>
4.事件定义在组件中，和生命周期函数同级
把事件中this指向当前组件的方式
定义函数需要在constructor中声明
constructor(){
super()
this.state={}
this.functionName=this.functionName.bind(this)
}
functionName(){
console.log(this)
}
<button onClick={this.functionName}></button>
直接在事件函数后加bind(this)
functionName(){
console.log(this)
}
<button onClick={this.functionName.bind(this)}></button>
使用箭头函数
functionName =()=>{
console.log(this)
}
<button onClick={this.functionName}></button>
携带参数
实参是从bind()的第二个参数算的
demo(cs,cs2){
console.log(cs) // about
console.log(cs2) // home
}
<button onClick={this.demo.bind(this,'about','home')}>点我一下</button>
事件对象
在事件中添加参数 e 或event，放在形参最后。
state状态的修改
异步修改：
同一个事件函数中出现多次state状态修改，react不会立即更新state，而是进行合并。
下面代码会先输出 222 ，后输出 111
this.setState({
key:value
},()=>{console.log(‘111’)})
console.log(‘222’)
同步修改：
方式1：
this.setState(function(state,props){
return {
key:value
}
})
方式2：
async funName(){
await this.setState({
key:value
})
}
本节作业：
1、 给元素绑定事件，让this指向当前组件，并修改state的值
2、 定义组件，在app.js中引入组件，把app.js的state值传递给子组件，并在子组件中显示
扫一扫
2025
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
