首页 > 代码库 > React 学习总结(一)

React 学习总结(一)

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 学习总结(一)