怎么做购物网站,如何搭建论坛网站,做计算机题目的网站,音乐主题wordpressreact从不会到入门1_react初识1.1_react基础环境搭建1.2_文件目录介绍1.2_JSX基础1.2.1_JSX介绍1.2.2_JSX表达式1.2.3_列表渲染1.2.4_条件渲染1.2.5_函数调用1.2.6_样式控制2_组件基础2.1_函数组件2.2_点击事件3_组件通讯3.1_父子关系4_生命周期4.1_挂载阶段4.2_更新阶段5_Hook…
react从不会到入门1_react初识1.1_react基础环境搭建1.2_文件目录介绍1.2_JSX基础1.2.1_JSX介绍1.2.2_JSX表达式1.2.3_列表渲染1.2.4_条件渲染1.2.5_函数调用1.2.6_样式控制2_组件基础2.1_函数组件2.2_点击事件3_组件通讯3.1_父子关系4_生命周期4.1_挂载阶段4.2_更新阶段5_Hook基础5.1_useState用于参数的更新和渲染5.2_组件的更新过程5.3_useEffect5.4_useRef5.5_useContext6_react-router1_react初识
react教程
1.1_react基础环境搭建 方法一使用npm安装react脚手架npm install -g create-react-app然后create-react-app app-name 方法二直接使用react脚手架搭建项目结构npx create-react-app app-name 其中app-name的“-”不能省略npx是临时安装脚手架构建完项目后会自动删除。 1.2_文件目录介绍 package.json
{
//项目依赖目录dependencies: {testing-library/jest-dom: ^5.16.5,testing-library/react: ^13.4.0,testing-library/user-event: ^13.5.0,react: ^18.2.0,react-dom: ^18.2.0,react-scripts: 5.0.1,web-vitals: ^2.1.4},
//命令列表scripts: {start: react-scripts start,build: react-scripts build,test: react-scripts test,eject: react-scripts eject},eslintConfig: {extends: [react-app,react-app/jest]}
}
index.js
//React:框架的核心包
//ReactDOM:专门做渲染相关的包
import React from react;
import ReactDOM from react-dom/client;
//引入全局的样式文件
import ./index.css
//项目的根组件
import App from ./App;
//获取root元素root元素位于public目录下index.html中
const root ReactDOM.createRoot(document.getElementById(root));
//对root进行渲染
root.render(//如果是react18版本需要去掉React.StrictMode标签React.StrictModeApp //React.StrictMode
);1.2_JSX基础
1.2.1_JSX介绍 概念JSX是JavaScript XML (HTML)的缩写表示在JS代码中书写HTML结构 作用在React中创建HTML结构(页面UI结构) 原理JSX并不是标准的JS语法是JS的语法扩展浏览器默认是不识别的脚手架中内置的babel/plugin-transform-react-jsx包用来解析该语法 1.2.2_JSX表达式
语法
{JS表达式}//将此式放入html语法中即可注意只能是表达式不能是语句如if等语句则报错const name 佳佳
const flag true
function App() {return (div classNameApp{name}{flag?周周:蛇蛇}/div);
}
export default App;1.2.3_列表渲染
const songs [{ id: 1, name: 痴心绝对 },{ id: 2, name: 像我这样的人 },{ id: 3, name: 南山南 }
]
function App() {return (div classNameApp//使用map进行逐个渲染{songs.map(itemName li key{songs.id}{itemName.name}/li)}//等价于li key{songs[0].id}{songs[0].name}/lili key{songs[1].id}{songs[1].name}/lili key{songs[2].id}{songs[2].name}/li/div);
}
export default App;1.2.4_条件渲染
// 来个布尔值
const flag true
function App() {return (div classNameApp{/* 条件渲染字符串 */}{flag ? react真有趣 : vue真有趣}{/* 条件渲染标签/组件 */}{flag ? spanthis is span/span : null}/div)
}
export default App1.2.5_函数调用
const fun (type){if (type 1)return h1蛇蛇/h1else return h1周周/h1
}
function App() {return (div classNameApp{fun(1)}/div);
}
export default App;
1.2.6_样式控制
行内样式
const styleObj {color:red
}
function App() {return (div classNameAppdiv style{ styleObj }this is a div/div/div)
}
export default App类名样式
创建一个css文件然后在本文件导入即可使用css中已声明好的样式
app.css
.title {font-size: 30px;color: blue;
}app.js
import ./app.css
function App() {return (div classNameAppdiv classNametitlethis is a div/div/div)
}
export default App2_组件基础
2.1_函数组件
组件的名称必须首字母大写react内部会根据这个来判断是组件还是普通的HTML标签函数组件必须有返回值表示该组件的 UI 结构如果不需要渲染任何内容则返回 null
2.2_点击事件
function App() {//e是点击事件信息const onclickEvent(e,str){console.log(e,str)}return (div classNameApp onClick{(e){onclickEvent(e,蛇蛇)}}点击一下/div);
}
export default App;3_组件通讯
组件是独立且封闭的单元默认情况下组件只能使用自己的数据state
组件化开发的过程中完整的功能会拆分多个组件在这个过程中不可避免的需要互相传递一些数据
为了能让各组件之间可以进行互相沟通数据传递这个过程就是组件通信
父子关系 - 最重要的兄弟关系 - 自定义事件模式产生技术方法 eventBus / 通过共同的父组件通信其它关系 - mobx / redux / zustand
3.1_父子关系
父传子
1. props是只读对象readonly
根据单项数据流的要求子组件只能读取props中的数据不能进行修改
2. props可以传递任意数据
数字、字符串、布尔值、数组、对象、函数、JSX
import React from react// 函数式子组件
function FSon(props) {console.log(props)return (div子组件1{props.msg}/div)
}
// 父组件
class App extends React.Component {state {message: this is message}render() {return (divdiv父组件/divFSon msg{this.state.message} //div)}
}export default App子传父
子组件调用父组件的函数进行传值
import React from react// 子组件
function Son(props) {function handleClick() {// 调用父组件传递过来的回调函数 并注入参数props.changeMsg(this is newMessage)}return (divbutton onClick{handleClick}change/button/div)
}class App extends React.Component {state {message: this is message}// 提供回调函数changeMessage (newMsg) {console.log(子组件传过来的数据:,newMsg)this.setState({message: newMsg})}render() {return (divSonmsg{this.state.message}// 传递给子组件changeMsg{this.changeMessage}//div)}
}export default App4_生命周期 react教程
4.1_挂载阶段
钩子 函数触发时机作用constructor创建组件时最先执行初始化的时候只执行一次1. 初始化state 2. 创建 Ref 3. 使用 bind 解决 this 指向问题等render每次组件渲染都会触发只用于渲染UI注意 不能在里面调用setState() 与 挂载阶段 是同一个rendercomponentDidMount组件挂载完成DOM渲染后执行初始化的时候执行一次1. 发送网络请求 2.DOM操作
4.2_更新阶段
钩子函数触发时机作用render每次组件渲染都会触发只用于渲染UI与 挂载阶段 是同一个rendercomponentDidUpdate组件更新后DOM渲染完毕DOM操作可以获取到更新后的DOM内容不要直接调用setState
5_Hook基础 Hooks的出现解决了俩个问题 1. 组件的状态逻辑复用 2.class组件自身的问题 组件的逻辑复用 在hooks出现之前react先后尝试了 mixins混入HOC高阶组件render-props等模式 但是都有各自的问题比如mixin的数据来源不清晰高阶组件的嵌套问题等等class组件自身的问题 class组件就像一个厚重的‘战舰’ 一样大而全提供了很多东西有不可忽视的学习成本比如各种生命周期this指向问题等等而我们更多时候需要的是一个轻快灵活的’快艇’
5.1_useState用于参数的更新和渲染
使用步骤
导入 useState 函数调用 useState 函数并传入状态的初始值从useState函数的返回值中拿到状态和修改状态的方法在JSX中展示状态调用修改状态的方法更新状态
import { useState } from reactfunction App() {// 参数状态初始值比如,传入 0 表示该状态的初始值为 0// 返回值数组,包含两个值1 状态值state 2 修改该状态的函数setState名字可以自定义const [count, setCount] useState(0)return (button onClick{() { setCount(count 1) }}{count}/button)
}
export default App5.2_组件的更新过程
函数组件第一次渲染 从头开始执行该函数组件中的代码逻辑调用 useState(0) 将传入的参数作为状态初始值即0渲染组件此时获取到的状态 count 值为 0
函数组件第二次渲染 useState会被自动监听所以当count改变时就会重新渲染 点击按钮调用 setCount(count 1) 修改状态因为状态发生改变所以该组件会重新渲染组件重新渲染时会再次执行该组件中的代码逻辑再次调用 useState(0)此时 React 内部会拿到最新的状态值而非初始值比如该案例中最新的状态值为 1再次渲染组件此时获取到的状态 count 值为1
5.3_useEffect
1、什么是副作用
副作用是相对于主作用来说的一个函数除了主作用其他的作用就是副作用。对于 React 组件来说主作用就是根据数据state/props渲染 UI除此之外都是副作用比如手动修改 DOM 常见的副作用 数据请求 ajax发送手动修改domlocalstorage操作 useEffect函数的作用就是为react函数组件提供副作用处理的 2、监听变量变化
useEffect注意事项useEffect是在dom渲染之后才执行的 不加依赖项初始化重新渲染 加[]初始化执行一次 加特定的依赖项[count , name]就会监听这两种属性
function App() { const [count, setCount] useState(0) const [name, setName] useState(str) useEffect(() { console.log(副作用执行了) }, [count],[name]) return ( button onClick{() { setCount(count 1) }}{count}/button button onClick{() { setName(cp) }}{name}/button / )
}3、在函数组件销毁的时候清除副作用
import { useEffect, useState } from reactfunction Test(){useEffect(() {const timerId setInterval(() {console.log(1s打印一次)}, 1000)return () {// 用来清理副作用的事情当App组件被销毁的时候clearInterval(timerId)}})return (div{test}/div)
}const App () {const [flag, setFlag] useState(true)return (div{flag?Test/:null}//点击按钮之后flag变false组件Test销毁button onClick{() setFlag(!flag)}swicth/button/div)
}export default App5.4_useRef
使用场景
在函数组件中获取真实的dom元素对象或者是类组件对象
使用步骤
导入 useRef 函数执行 useRef 函数并传入null返回值为一个对象 内部有一个current属性存放拿到的dom对象组件实例通过ref 绑定 要获取的元素或者组件
import { useEffect, useRef } from reactfunction App() { const h1Ref useRef(null) useEffect(() { console.log(h1Ref) },[]) return ( div h1 ref{ h1Ref }this is h1/h1 /div )
}
export default App5.5_useContext
作用将父组件的值可以直接传给孙子组件
import { createContext, useContext } from react
// 创建Context对象
const Context createContext()function Foo() { return divFoo Bar//div
}function Bar() { // 底层组件通过useContext函数获取数据 const name useContext(Context) return divBar {name}/div
}function App() { return ( // 顶层组件通过Provider 提供数据 Context.Provider value{this is name} divFoo//div /Context.Provider )
}export default App6_react-router
