首页 > 代码库 > React 学习总结（一）

React 学习总结（一）

2024-09-27 10:28:39   217人阅读

1、  ProtoTypes：为每个传入你的组件的属性添加类型检查

 

一般类型：

    ProtoTypes.array

    ProtoTypes.bool

    ProtoTypes.func

    ProtoTypes.number

    ProtoTypes.object

    ProtoTypes.string

    ProtoTypes.any

用法：

import PropTypes from ‘prop-types‘;

DetailPanel.propTypes = {
// isRequired表示必须传入的参数
 data: PropTypes.object.isRequired, 
};

 

2、 defaultProps：表示当props未传入时，设置的默认值。

 

用法如下：

DetailPanel.defaultProps = {
    street: true,
    attached: false,
    streetImg: img1,
    attachImg: img2,
    column: null,
};

 

3、props和state的区别

 

this.props：存储的是从父级传递过来的只读数据。它属于父级，并且不能被它的子元素改变，这个数据应该被认为是不可改变的。

this.state：存储的数据是组件私有的，状态不应从组件外部访问，除非父组件添加或设置了该组件的初始状态。它能被组件修改。当state更新后组件会自会自动更新渲染。

注明：最好用props，state为有状态，最好不用。

在ES6中，初始化（在构造函数中）及设置state可用如下方式：

//在构造函数中
this.state = {
Img:props.img,
data:props.data,
}

//在构造函数外部设置state
this.setState({
Img:props.img,
data:props.data,
        }

//在构造函数中
let stateImg = props.streetImg;
let stateImg2 = props.attachImg;
let stateData = this.handleDataWithColumn();
this.state = {stateImg, stateData, stateImg2};

 

4、  组件内创建函数

 

格式如下：

func = (arg1,…) => {
      //…
};

handleDataWithColumn= (trueData,column) =>{
        //…
};
    
//当参数来自组件，可如下使用
handleDataWithColumn = () => {
        // get attributes of the object
        const trueData = http://www.mamicode.com/this.props.data;
        const column = this.props.column;
        // trueData、column…
}

 

5、  遍历数组循环设置标签（在render函数中，并且需要设置key）

注：当定义了const ex = …;

     使用的时就是 ex.map(data) => (…)，注明不添加{}

//dataSource:[{‘key’:XX,’name’:XX,’info’:XX},…]
<table className={styles.tableDetails}>
                {
                    this.props.dataSource.map((data) =>(
                        <tr key={data.key}>
                            <td className={styles.tableName}>{data.name}</td>
                            <td className={styles.tableInfo}>{data.info}</td>
                        </tr>
                    ))

                }
</table>

 

6、条件渲染

条件渲染可以通过 if…else… 语句，三目运算符语句，还可以通过jsx自身的内嵌表达式 Logical && Operator 逻辑&&模块。

官网：https://facebook.github.io/react/docs/conditional-rendering.html

博客推荐：http://www.cnblogs.com/hahazexia/p/6402468.html?utm_sour..

我常用的是第三种。

{this.props.attached &&
<div className={styles.attachmentLinkWrap}>
      <a className={styles.attachmentLink} 
onClick={this.props.handlerAttachClick}>
查看附件
</a>
    </div>
   }

 

注：后续会继续更新关于 React生命周期和单向流动的学习总结

 

React 学习总结（一）


联系
我们