react开发中的小细节

合集 - 前端开发(23)

1.第一次写博客，关于前端开发deMVC在js中的应用2016-07-12

2.react开发中的小细节2017-03-19

3.CSS开启硬件加速来提高网站性能2019-06-174.js中this的指向问题2019-06-105.Js面向对象构造函数继承2017-03-266.Js面向对象原型~构造函数2017-03-197.JavaScript如何工作：垃圾回收机制 + 常见的4种内存泄漏2019-10-288.Promise核心原理解析2019-09-279.图解javascript的this指向2019-09-1210.图解javascript原型链2019-09-0611.被闭包啪啪啪的打脸之 闭包的错误使用2019-08-2812.react解析: render的FiberRoot(三)2019-08-1013.个人小程序应用开发指南2019-07-2214.ES2019 / ES10有什么新功能?2019-06-2115.2022前端开发知识总结归纳（前端掌握知识）2022-10-3116.Axios源码解析：请求响应拦截器2021-12-0217.AntV G2可视化引擎, 有用过嘛？2021-11-3018.弄懂！ES6中的Iterator迭代器2020-06-1019.🔥[译] 正交设计组件的好处2020-01-0920.小程序开发指南之性能优化2019-12-0421.聊一聊，React开发中应该规避的点2019-11-2622.解析：让你弄懂redux原理2019-11-0523.关于Web GIS基础知识2024-03-26

收起

　　目前开始使用react余遇到的问题还不是很多，但还是希望总结一下。

　　react中的属性prop：

　　　　在react中组件的父子组件的通信是基于prop的，当然对于底层的东西不是特别了解，但可以说一说它的基本用法。

　　　　上代码：

import React, { Component, PropTypes} from 'react'

class Parent Component { //父组件
  render() {
    return (
      <div>
        <Children name='刘恒'></Children>
      </div>
    )
  }
}
class Children extends Component {  //子组件
    reder() {
        return(
            <div>{this.prop.name}</div>
        )
    }
} 

Children.propTypes ={ //验证父组件传到子组件的属性是否为字符串
　　name : PropTypes.string.isRequired
}

<!-- 他们之间通过prop传递数据，当然这是单向的，也无法双向，父组件控制子组件
当然可以更加深入，也可以通过点击事件控制 -->

　　　　点击事件通过prop控制就不在这里上代码了，尽量将组件细化，当然你也可以不细化，这取决你的业务功能。同时在使用必须验证prop的类型是否正确

　　react中的属性state：

　　　　state是react中的状态，非常重要

import React, { Component } from 'react'

class Messages extends Component {
  constructor(){
    super();
    this.state({
        item: 0
    })
  }
  AddClick(event, item) {
    const i = this.state.item;
    i++;
    this.setState({
        item: i
    })
    console.log(item)
  }
  render() {
    return (
      <div>
        <h2 onClick={(event) => {this.AddClick(event,this.state.item)}}>{this.state.item}</h2>
      </div>
    )
  }

<!-- 这段代码中有两个需要注意的问题 -->

1. 　在创建类组件初始化时，Es6中的做法是使用constructor构造函数初始化。
2. 　在点击中，你要获取绑定在元素中的值时，需要记住，必须使用箭头函数闭包调用，不然无法获取到 this.state.item 的值