淘宝客网站怎么批量采集淘宝商品方维采集淘宝数据思路知乎推广公司
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是控制条件