赞
踩
npm install -g create-react-app // 全局安装脚手架
create-react-app react-01 // 新建一个项目
npm start
{
proxy:"http:192.168.2.107:8080"
}
npm i serve -g
serve dist
// 父组件 class App extends Component { addList = (item) => { // 1.定义方法 } render() { return ( <div> <Add addList={this.addList} /> // 2.传递方法 </div > ); } } // 子组件 export default class Add extends Component { add = (e) => { if (e.keyCode == 13) { this.props.addList(e.target.value) // 3.调用方法 } } render() { return ( <div> <input type="text" placeholder='新增' onKeyUp={this.add} /> </div> ) } }
npm i pubsub-js
import PubSub from 'pubsub-js' export default class Foot extends Component { componentDidMount() { // 组件渲染完成创建订阅 (消息名字,收到消息回调(消息名字,数据)) this.sub = PubSub.subscribe('getData', (name, data) => { console.log(name, data) }) } componentWillUnmount() { PubSub.unsubscribe(this.sub) // 组件卸载前取消订阅 } render() { return ( <div></div> ) } }
import PubSub from 'pubsub-js'
export default class Add extends Component {
add = (e) => {
PubSub.publish('getData', e.target.value) // 发布订阅消息
}
render() {
return (
<div>
<input type="text" placeholder='新增' onKeyUp={this.add} />
</div>
)
}
}
报错信息:Git: husky > pre-commit (node v14.16.1)
错误原因:项目中使用了husky, 这个会在你git commit的时候先执行里面的严谨模式, 对代码进行检查, 有error就会终止提交
git commit前检测husky与pre-commit
git commit -m "提交页面备注 绕过eslint检查" --no-verify
{
title: '序号',
render: (text, record, index) => {
return (
`${(searchParam.pageIndex || 1 - 1) * (searchParam.pageSize) + (index + 1)}`//当前页数减1乘以每一页页数再加当前页序号+1
)
}
},
function qu() {
console.log('this', this)
}
qu() // 打印 undefined
let qu1 = qu.bind(window) // 改变了this指向
qu1() // 打印 window对象
a = 1
class Car {
a = 1, //直接变量赋值,代表给实例添加一个属性
}
const car = new Car()
console.log(22, car) //{a:1}
let arr1 = [1, 2, 3, 4]
let arr2 = [6, 7, 8, 9]
console.log(...arr1) // 1 2 3 4
console.log([...arr1, ...arr2]) //合并数组 [1, 2, 3, 4, 6, 7, 8, 9]
function sum(...v) {
console.log(v) //[1, 2, 3, 4]
return v.reduce((s, c) => {
return s + c
})
}
let ss = sum(1, 2, 3, 4)
console.log(ss) // 10
let obj1 = {
name: 'rose',
age: 18
}
let obj2 = {
name1: 'jack',
age1: 13
}
let obj = { ...obj1 }
console.log(obj) // 类似深拷贝 {name: 'rose', age: 18}
console.log({ ...obj1, name: 'sunny', sex:'1' }) // 克隆并修改属性 {name: 'sunny', age: 18 , sex:'1'}
console.log({ ...obj1, ...obj2 }) // 合并对象 {name: 'rose', age: 18, name1: 'jack', age1: 13}
let obj = { name:'张三' } // {name: '张三'}
let name = 'key';
obj = { [name] : '张三'} // obj[name] = '张三'
console.log(obj) // {key: '张三'}
let obj = {
a: { b: 1 }
}
let { a: { b } } = obj //连续解构,直接拿到b
console.log(b)
let { a: { b: data } } = obj // 变量取别名 变量:别名
console.log(data)
旧虚拟 DOM 找到和新虚拟 DOM 相同的 key: 若内容没变,直接复用真实 DOM;若内容改变,则生成新的真实 DOM,替换页面中之前的真实DOM
旧虚拟 DOM 未找到和新虚拟 DOM 相同的 key:根据数据创建新的真实 DOM ,渲染到页面
export default class Add extends Component {
add = (e) => {
console.log(e.target.value, e.keyCode) // 13
e.target.value = '' // 清空input
}
render() {
return (
<div>
<input type="text" placeholder='新增' onKeyUp={this.add} />
</div>
)
}
}
state = { list: [ { id: 1, value: '吃饭', checked: true }, { id: 2, value: '睡觉', checked: false }, { id: 3, value: '打豆豆', checked: false } ] } addList = (item) => { let { list } = this.state this.setState({ list: [{ id: list.length + 1, value: item, checked: false }, ...list] // 1.数组前边新增一条数据 }) } delList = (id) => { let { list } = this.state this.setState({ list: list.filter(item => item.id != id) // 2.删除数组某一项,根据id匹配 }) } changeList = (id, checked) => { let { list } = this.state this.setState({ list: list.map(item => { // 3. 修改数组某一项的checked属性值,根据id匹配 if (item.id === id) { return { ...item, checked } //原理:合并对象,属性名相同会覆盖 } else { return item } }) }) } getNum = () => { let { list } = this.state let num = list.reduce((pre, item) => { // 4.统计选中的个数,reduce(回调(累计值,当前项), [初始值]) return pre + (item.checked ? 1 : 0) }, 0) return num }
[1,2,3,4].some(item=>item>2) // true
[1,2,3,4].find(item=>item>2) // 3
[1,2,3,4].filter(item=>item>2) // [3, 4]
[{type:'ss1',id:1},{type:'ss2',id:2},{type:'ss3',id:3}].map(item=>item.type) // ['ss1', 'ss2', 'ss3']
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。