react遍历列表
<h2 id="遍历列表遍历对象以及组件">遍历列表,遍历对象,以及组件</h2><h4 id="1遍历列表map和foreach的区别">1.遍历列表(map和forEach的区别)</h4>
<p>return后面不能为空格，回车，否则就是报错,如果非要换行，，在return后面加一个小括号,变成了一个表达式(自执行函数)<br>
<br>
</p>
<pre><code><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}</li>)
}
return <ul>{tem}</ul>
}
function render() {
ReactDOM.render(
<div>
{showList(arr)}
{a2(lesson)}
</div>,
document.getElementById('box')
)
}
render()
</script>
</code></pre>
<h3 id="foreach和map的区别">forEach和map的区别</h3>
<p>**1、map:对每一项数据进行映射，不改变本身的数组，返回布尔值</p>
<p>例如:</p>
<pre><code> var arr=
var newArr=arr.map((item)=>{
return item*2
})
console.log(newArr)//不改变原数组
</code></pre>
<p>**2、forEach:遍历所有成员，且改变数组的本身</p>
<p>例如<br>
var arr =<br>
arr.forEach((item,index,arr)=>{<br>
arr = item+1<br>
})<br>
console.log(arr)</p>
<h3 id="二组件无状态组件类组件">二.组件(无状态组件,类组件)</h3>
<p>1.无状态组件</p>
<pre><code>const 组件的名字 =(props)=>{
return jsx表达式
}
</code></pre>
<h5 id="无状态组件设置默认值">无状态组件设置默认值</h5>
<p>2.类组件</p>
<pre><code>首先里面有三个属性(state,props,refs),简单理解知道一下，接下来会有代码示例
state:表示组件内部的数据
props:外部的数据
refs:标识一个组件节点
</code></pre>
<p>class 组件的名字 extends React.Component{</p>
<pre><code>constructor(props){
super(props) 必须存在super，否则你无法在构造函数中使用 this
//构造函数//
}
render(){}
</code></pre>
<p>}</p>
<h3 id="三组件设置默认值父子组件向子组件没传值的情况下在子组件中设置默认值">三、组件设置默认值(父子组件向子组件没传值的情况下,在子组件中设置默认值)</h3>
<pre><code>一、类组件
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)
}
staticdefaultProps={
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">
<Onea={age}/>
</div>
)
}
}
2、无状态组件：
组件名.default={
key:默认值
}
</code></pre>
<h3 id="组件设置默认值的属性">组件设置默认值的属性</h3>
<pre><code>1、类组件
引入 {propTypes} from "propTypes"
static Proptypes={
a:propTypes.number
}
2、无状态组件
组件名.proptypes={
a:protypes.类型.isRequired(必须传,不穿报警告)
}
</code></pre>
<p>扩展:super浅析:</p>
<pre><code>1.有时候我们不传 props，只执行 super()，或者没有设置 constructor 的情况下，依然可以在组件内使用 this.props，为什么呢？
其实 React 在组件实例化的时候，马上又给实例设置了一遍 props：
2.那是否意味着我们可以只写 super() 而不用 super(props) 呢？
不是的。虽然 React 会在组件实例化的时候设置一遍 props，但在 super 调用一直到构造函数结束之前，this.props 依然是未定义的。
如果这时在构造函数中调用了函数，函数中有 this.props.xxx 这种写法，直接就报错了。而用 super(props)，则不会报错。
</code></pre>
<h3 id="3遍历对象">3.遍历对象</h3>
<p>【此处遍历对象使用父子传值的方式】</p>
<p><br>
<br>
</p>
<pre><code><!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>
</code></pre>
<p>扩展:对象浅拷贝(2种方式)</p>
<pre><code>1.首先,了解一下什么是浅拷贝和深拷贝？
1.假设B复制了A，修改A的时候，看B是否发生变化：
2.如果B跟着也变了，说明是浅拷贝，拿人手短！（修改堆内存中的同一个值）
3.如果B没有改变，说明是深拷贝，自食其力！（修改堆内存中的不同的值）
4.浅拷贝（shallowCopy）只是增加了一个指针指向已存在的内存地址，
5.深拷贝（deepCopy）是增加了一个指针并且申请了一个新的内存，使这个增加的指针指向这个新的内存，
6.使用深拷贝的情况下，释放内存的时候不会因为出现浅拷贝时释放同一个内存的错误。
</code></pre>
<p>对象浅拷贝的第一种方式</p>
<pre><code>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
</code></pre>
<p>类组件中的ref参数(标识节点)</p>
<p>第一种: class App extends React.Component {<br>
add() {<br>
console.log(this.refs.submit)<br>
}</p>
<pre><code> render() {
return (
<div>
<input ref='submit' type="button" onClick={this.add.bind(this)} />
</div>
)
}
}
</code></pre>
<p>第二种：在需要操作的dom节点里绑定回掉函数，在componentDidMount中拿到值<br>
console.log(this.textInput)</p>
<p>class App extends React.Component {</p>
<pre><code> componentDidMount() {
console.log(this.textInput)
}
render() {
return (
<div>
<input type="text" ref={input => this.textInput = input} />
</div>
)
}
}
ReactDOM.render(<App />,
document.querySelector("#box"))
</code></pre>
<p>第三种标识节点：<br>
1、引入内置的createRef<br>
2、实例代码</p>
<pre><code>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>
)
}
</code></pre>
<p>}</p><br><br>
来源：https://www.cnblogs.com/cc0419/p/12329238.html
頁:
[1]