这react门课我是学习b站黑马的课程,不是打公告哈,我只是过一遍,让自己对学过的知识有印象,所以笔记是有很大部分直接复制总结过来的,方便后面的我进行复习。如有冒犯,联系必删
React介绍以及创建方式
// 项目的根组件
// APP=>index.js->public/index.html(root)
function App() {
return (
<div className="App">
this is
</div>
);
}
export default App;
App.js
// 项目的根组件
// APP=>index.js->public/index.html(root)
function App() {
return (
<div className="App">
this is
</div>
);
}
export default App;
JSX基础
JSX基础-高频场景
const message = 'this is message'
function getAge(){
return 18
}
function App(){
return (
<div>
<h1>this is title</h1>
{/* 字符串识别 */}
{'this is str'}
{/* 变量识别 */}
{message}
{/* 函数调用 渲染为函数的返回值 */}
{getAge()}
{/* 方法的调用 */}
{new Date().getDate()}
{/* 使用js对象 */}
<div style={{ color: 'red' }}>wo sai </div>
</div>
)
}
JSX高频场景-列表渲染
const list = [
{id:1001, name:'Vue'},
{id:1002, name: 'React'},
{id:1003, name: 'Angular'}
]
// map循环哪个结构,return就是哪个结构 要加上key 字符串 提高性能
function App(){
return (
<ul>
{list.map(item=><li key={item.id}>{item}</li>)}
</ul>
)
}
JSX高频场景-条件渲染
const flag = true
const loading = false
function App(){
return (
<div className="App">
//真则显示,假则不显示
{flag && <span>this is span</span>}
//假则显示loading...,真则显示this is span
{loading ? <span>loading...</span>:<span>this is span</span>}
</div>
)
}
JSX高频场景-复杂条件渲染
const type = 1 // 0|1|3
function getArticleJSX(){
if(type === 0){
return <div>无图模式模版</div>
}else if(type === 1){
return <div>单图模式模版</div>
}else(type === 3){
return <div>三图模式模版</div>
}
}
function App(){
return (
<div className="App">
{ getArticleJSX() }
</div>
)
}
React的事件绑定
基础实现
React中的事件绑定,通过语法 on + 事件名称 = { 事件处理程序 }
,整体上遵循驼峰命名法
使用事件参数
传递自定义参数
语法:事件绑定的位置改造成箭头函数的写法,在执行clickHandler实际处理业务函数的时候传递实参
同时传递事件对象和自定义参数
语法:在事件绑定的位置传递事件实参e和自定义参数,clickHandler中声明形参,注意顺序对应
React组件基础使用
组件是什么
概念:一个组件就是一个用户界面的一部分,它可以有自己的逻辑和外观,组件之间可以互相嵌套,也可以复用多次
组件基础使用
在React中,一个组件就是首字母大写的函数,内部存放了组件的逻辑和视图UI, 渲染组件只需要把组件当成标签书写即可
// 1. 定义组件
function Button(){
return <button>click me</button>
}
//或者
const Button=()=>{
return <button>click me</button>
}
// 2. 使用组件
function App(){
return (
<div>
{/* 自闭和 */}
<Button/>
{/* 成对标签 */}
<Button></Button>
</div>
)
}
组件状态管理-useState
基础使用
useState 是一个 React Hook(函数),它允许我们向组件添加一个状态变量
, 从而控制影响组件的渲染结果
本质:与普通JS变量不同的是,状态变量一旦发生变化组件的视图UI也会跟着变化(数据驱动视图)
//项目的根组件
import { useState } from 'react'
function App() {
const [count, setCount] = useState(0)
const y = () => {
setCount(count + 1)
}
return (
<div className='App'>
<button onClick={y}>{count}</button>
</div>
)
}
export default App
或者
function App(){
const [ count, setCount ] = React.useState(0)
return (
<div>
<button onClick={()=>setCount(count+1)}>{ count }</button>
</div>
)
}
状态的修改规则
修改对象状态
总代码:
组件的基础样式处理
classnames优化类名控制
使用前还是要引入命令npm install classnames
然后还是要导入 import classnames from 'classnames',然后改写
本站资源均来自互联网,仅供研究学习,禁止违法使用和商用,产生法律纠纷本站概不负责!如果侵犯了您的权益请与我们联系!
转载请注明出处: 免费源码网-免费的源码资源网站 » react入门到实战-day1
发表评论 取消回复