遍历列表,遍历对象,以及组件

1.遍历列表(map和forEach的区别)
return后面不能为空格，回车，否则就是报错,如果非要换行，，在return后面加一个小括号,变成了一个表达式(自执行函数)

forEach和map的区别

**1、map:对每一项数据进行映射，不改变本身的数组，返回布尔值

例如:
var arr=[1,2,3]
var newArr=arr.map((item)=>{
return item*2
})
console.log(newArr)//不改变原数组

**2、forEach:遍历所有成员，且改变数组的本身

例如
var arr =[1,2,3]
arr.forEach((item,index,arr)=>{
arr[index] = item+1
})
console.log(arr)

二.组件(无状态组件,类组件)

1.无状态组件

const 组件的名字 =(props)=>{
return jsx表达式
}

无状态组件设置默认值

2.类组件

首先里面有三个属性(state,props,refs),简单理解知道一下，接下来会有代码示例
state:表示组件内部的数据
props:外部的数据
refs:标识一个组件节点

class 组件的名字 extends React.Component{

constructor(props){
super(props) 必须存在super，否则你无法在构造函数中使用 this
//构造函数//
}
render(){}

}

三、组件设置默认值(父子组件向子组件没传值的情况下,在子组件中设置默认值)
一、类组件
static defaultProps={
n:5
}

例如：
//子组件
import React, { Component } from 'react'

export default class One extends Component {
constructor(props){
super(props)
console.log(this.props.a,this.props.n)
}
static defaultProps={
n:'sun'
}
render() {
return (

11

)
}
}

//父组件：
import React from 'react';
components/Count"
import One from "./components/One"
import './App.css';
export default class App extends React.Component {
constructor(props){
super(props)
this.state={
name:'chen',
age:11
}
}
render() {
let {name,age} = this.state
return (

)
}
}

2、无状态组件：
组件名.default={
key:默认值
}

组件设置默认值的属性
1、类组件

引入 {propTypes} from "propTypes"
static Proptypes={
a:propTypes.number
}

2、无状态组件
组件名.proptypes={
a:protypes.类型.isRequired(必须传,不穿报警告)
}

扩展:super浅析:

1.有时候我们不传 props，只执行 super()，或者没有设置 constructor 的情况下，依然可以在组件内使用 this.props，为什么呢？
其实 React 在组件实例化的时候，马上又给实例设置了一遍 props：

2.那是否意味着我们可以只写 super() 而不用 super(props) 呢？
不是的。虽然 React 会在组件实例化的时候设置一遍 props，但在 super 调用一直到构造函数结束之前，this.props 依然是未定义的。
如果这时在构造函数中调用了函数，函数中有 this.props.xxx 这种写法，直接就报错了。而用 super(props)，则不会报错。

3.遍历对象
【此处遍历对象使用父子传值的方式】

[Object.keys:拿到key值]
[Object.values:拿到values值]
[Object.entries:拿到键值对组成的数组]

扩展:对象浅拷贝(2种方式)

1.首先,了解一下什么是浅拷贝和深拷贝？
1.假设B复制了A，修改A的时候，看B是否发生变化：
2.如果B跟着也变了，说明是浅拷贝，拿人手短！（修改堆内存中的同一个值）
3.如果B没有改变，说明是深拷贝，自食其力！（修改堆内存中的不同的值）
4.浅拷贝（shallowCopy）只是增加了一个指针指向已存在的内存地址，
5.深拷贝（deepCopy）是增加了一个指针并且申请了一个新的内存，使这个增加的指针指向这个新的内存，
6.使用深拷贝的情况下，释放内存的时候不会因为出现浅拷贝时释放同一个内存的错误。

对象浅拷贝的第一种方式

1.使用解构赋值：var obj ={a:'1',b:'2'}

let a = {
age: 1
}
let b = {...a}
a.age = 2
console.log(b.age) // 1

2.首先可以通过 Object.assign 来解决这个问题。

let a = {
age: 1
}
let b = Object.assign({}, a)
a.age = 2
console.log(b.age) // 1

类组件中的ref参数(标识节点)

第一种: class App extends React.Component {
add() {
console.log(this.refs.submit)
}

render() {
return (

)
}
}

第二种：在需要操作的dom节点里绑定回掉函数，在componentDidMount中拿到值
console.log(this.textInput)

class App extends React.Component {

componentDidMount() {
console.log(this.textInput)
}
render() {
return (

<input type="text" ref={input => this.textInput = input} />

)

}
}

ReactDOM.render(,
document.querySelector("#box"))

第三种标识节点：
1、引入内置的createRef
2、实例代码

import React, { Component } from 'react'
import {createRef} from 'react'
export default class index extends Component {

constructor(props){
super(props)
this.state={
n:createRef()
}
}

componentDidMount() {
console.log(this.state.n)
}
render() {
return (

)
}

}