黑马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 this is span}
{loading ? loading...... : this is 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被点击了")}
按钮

形参 e
这个e是当前组件
用的最多的是target,e.target

const handler = (e) => {console.log("button被点击了",e)}
按钮

传递自定义参数
通过箭头函数调用

const handler = (e) => {console.log("button被点击了",e)}
按钮

同时传递 e 和 自定义参数

const handler = (e) => {console.log("button被点击了",e)}
按钮

09 集 组件

组件有自己的UI和逻辑,可以和其他组件互相嵌套
组件可以复用多次
开头首字母大写
下面就是自定义组件

function Button(){
	return click me!
}

使用,两种使用方式

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. 

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

第一个参数是动态的类名,第二个是一个对象,key是要显示的类名,value是控制条件

17集结语-动态类名还有高阶的用法,可以去官网看