遍歷列表,遍歷對象,以及組件
1.遍歷列表(map和forEach的區別)
return后面不能為空格，回車，否則就是報錯,如果非要換行，，在return后面加一個小括號,變成了一個表達式(自執行函數)
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="../js/react.development.js"></script>
<script src="../js/react-dom.development.js"></script>
<script src="../js/babel.js"></script>
</head>
<body>
<div id="box">
</div>
<script type="text/babel">
var arr = ['aaa', 'bbb', 'cccc']
var lesson = ['json', 'pp', 'll']
var curIndex = 0
function showList(arr) {
return (
<ul>
{
arr.map((item, index) => {
return <li key={index}
style={{color:index===curIndex?"red":''}}
onClick={() => {
curIndex = index,
render()
}
}
>
{item}
</li>
})
}
</ul>
)
}
function a2(arr){
var tem = []
for(var i=0;i<arr.length;i++){
tem.push(<li key={i}>{arr[i]}</li>)
}
return <ul>{tem}</ul>
}
function render() {
ReactDOM.render(
<div>
{showList(arr)}
{a2(lesson)}
</div>,
document.getElementById('box')
)
}
render()
</script>
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 (
<div>
11
</div>
)
}
}
//父組件：
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 (
<div className="App">
<One a={age}/>
</div>
)
}
}
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:拿到鍵值對組成的數組]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="../js/react.development.js"></script>
<script src="../js/react-dom.development.js"></script>
<script src="../js/babel.js"></script>
</head>
<body>
<div id="box">
</div>
<script type="text/babel">
var obj = { a: '1', b: 'bbb', c: 'cccc' }
const App = ((props) => {
console.log(props.obj2)//拿到父組件傳過來的值
//{a: "1", b: "bbb", c: "cccc"}
return <div>
{
//對象遍歷使用的是Object.keys,將對象轉為數組類型，，在遍歷,拿到key值
Object.keys(props.obj2).map((item,index)=>{
return <li key={index}>{item}</li>
})
}
</div>
})
function render() {
ReactDOM.render(
<div>
<App obj2={obj}/>//將值傳給子組件
</div>,
document.getElementById('box')
)
}
render()
</script>
</body>
</html>
擴展:對象淺拷貝(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 (
<div>
<input ref='submit' type="button" onClick={this.add.bind(this)} />
</div>
)
}
}
第二種：在需要操作的dom節點里綁定回掉函數，在componentDidMount中拿到值
console.log(this.textInput)
class App extends React.Component {
componentDidMount() {
console.log(this.textInput)
}
render() {
return (
<div>
<input type="text" ref={input => this.textInput = input} />
</div>
)
}
}
ReactDOM.render(<App />,
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 (
<div>
<node ref={this.state.n} />
</div>
)
}
}