黑马Day01-03集开始
03集
JSX
jsx里面可以写 表达式,表达式里面会返回一个值
js语法的扩展,需要babel解析才能够在浏览器运行
语法
使用花括号 {} ,在里面进行编写jsx代码
04集
高频场景
使用引号传递字符串
使用js变量
函数调用和方法调用
使用js对象.js自带的一些对象或new出来的对象
{"this is msg"}
{count}
{getName()}
{new Date().getDate()}
// 使用js对象 {{color:'red',ackground:'green'}}
05集 jsx实现列表渲染
通过 js 的map 方法进行遍历,这里不能够使用for循环
因为 for 不返回值 但是 map 有返回值
{list.map(item => <li key={item.id}>{item.name}</li>)}
这个值可以是字符串,也可以是数字 ,只要唯一即可
06集 条件渲染
这里通过 && (逻辑与), ? : (三元表达式) 实现
{fla &7 <span>this is span</span>}
{loading ? <span>loading......</span> : <span>this is span</span>}
07集 复杂情况-非常多元素
控制非常多的元素,决定是否显示以及显示哪些
通过函数实现.通过自定义函数 + if 判断语句
// 在 APP.js 里面书写
const articleType = 1
function getArticleTem(){if(articleTyp === 1){return <div>我是无图模式</div>}if(articleTyp === 2){return <div>我是单图模式</div>}if(articleTyp === 3){return <div>我是三图模式</div>}
}
function App(){return (<div className='App'>{getArticleTem()}</div>)
}
08集-React事件绑定
on + 事件名称
const handler = () => {console.log("button被点击了")}
<button onClick='handler'>按钮</button>
形参 e
这个e是当前组件
用的最多的是target,e.target
const handler = (e) => {console.log("button被点击了",e)}
<button onClick='handler'>按钮</button>
传递自定义参数
通过箭头函数调用
const handler = (e) => {console.log("button被点击了",e)}
<button onClick='() => {handler('jack')}'>按钮</button>
同时传递 e 和 自定义参数
const handler = (e) => {console.log("button被点击了",e)}
<button onClick='(e) => {handler('jack')}'>按钮</button>
09 集 组件
组件有自己的UI和逻辑,可以和其他组件互相嵌套
组件可以复用多次
开头首字母大写
下面就是自定义组件
function Button(){return <Button>click me!</Button>
}
使用,两种使用方式
<Button />
<Button></Button>
10集 useState
react的hook函数.向组件添加一个状态变量,影响组件的渲染结果
// 第一个是变量,第二个是函数,用来修改count的值,第三个括号里面是count初始值
const [count,setSount] = useState(0)
function App(){useState [count,setCount] = useState(0)// 这里修改了,组件会重新渲染const change = () => {setCount(count+1)}return (<div><button onClick={change}>{count}</button></div>)
}
如果修改了值,则这个组件会重新渲染
11集 useState修改规则
只有通过 setCount,也就是在 useState里面写的方法,才会重新渲染组件
修改对象–{name:“小明”}
通过方法
const [name,setName] = useState({name:"小李"})
const change = () =>{setName(...name{name:"小6"})
}
12集-基础样式控制
行内样式
不推荐
样式属性字段需要驼峰形似书写
抽取行内样式
const style = {//todo}
然后把对象放进去
class类名控制
1. 写css文件,里面写样式1.1 .foo{background: green;}
3. import './index.css'
4. <div className='foo'></div>
13集列表渲染
自己去B站看怎么实现吧,老师准备的课件比较麻烦,需要自己写
这里需要定义一个方法,然后再函数里面使用map的遍历方法进行遍历,然后返回
14集-删除评论功能实现
给每个数据加上一个 key={item.id} ,然后添加方法 ,遍历数组,相等就删除,然后再重新赋值
自己的评论才显示删除按钮,需要多一个判断,当前用户userid和评论的userid相等才显示删除按钮
15集-切换tab功能实现
固定套路: 1 点击哪个tab,记录该tab的id 2. 然后再遍历的时候,和每个tab做匹配,如果匹配上,就把需要高亮显示的tab上写上对应的样式
通用思路
记录当前tab的唯一id
第二步,使用 {},里面在使用 ${} 比较当前评论所属type是否和点击的 type一致
核心代码
核心代码2
16集-评论排序功能实现
思路
js的数组有方法,可以进行排序.点击调用方法
在方法里面进行排序,然后通过 useState里面的方法进行设置更新
工具类 lodash 可以进行排序,生成新的数据不更改老数据
执行 npm i lodash
引入 import _ from ‘lodash’
使用
_.orderBy(commnetList,'like','desc')
_.orderBy(commentList,'times','desc')
17集classnames类名优化控制工具
classnames 一个简单的js库,通过条件动态控制class类名显示
npm i classnames
<span className={className(‘’,{active: type === item.type})}>
第一个参数是动态的类名,第二个是一个对象,key是要显示的类名,value是控制条件