React-组件

1、类组件

import React from 'react';
class ClassApp extends React.Component {
    constructor(props) {
        super(props);
        this.state={};
    }
    render() {
        return (
            <div>
                <h1>这是一个类组件</h1>
                <p>接收父组件传过来的值：{this.props.name}</p>
            </div>
        );
    }
}
export default ClassApp;

2、函数组件

import React from 'react';
function FuncApp(props) {
    return (
        <div>
            <h1>我是函数组件</h1>
            <h2>接收父组件传过来的值：{props.name}</h2>
        </div>
    );
}

3、Props

（1）定义和使用props

react中的每一个组件，都包含有一个属性（props），属性主要是从父组件传递给子组件的 

<!--父组件-->
<Child title={item.title} path={item.path} />
<!--子组件-->
<a className="mylink" href={this.props.path}>{this.props.title}</a>

（2）默认属性

在react中可以定义默认props，当我们没有给子组件传值时，将采用默认的props属性

class MyApp extends React.Component {
    render() {
        return (
            <div>{this.props.name}</div>
        )
    }	
}
MyApp.defaultProps = {
    name: '这是默认属性值'
};

（3）延展属性

在组件中使用{...this.props}的方式传递属性。“...”表示JSX的延展操作符，这种方式可以很方便的为组件指定多个属性，并且为属性的值指定数据类型

//父组件
<MyBox {...MyBox.props} />
//子组件
class MyApp extends React.Component {
    render() {
        return(
            <h1>{this.props.name} : {this.props.age} : {this.props.sex}</h1>
        );
    }
}
MyApp.props = {
    name: '张三', 
    age: 18,
    sex: '男'
};

（4）Props验证

// 添加属性类型验证，当传递的数据类型不正确时，会报错提示
MyApp.propTypes = {
    age: PropTypes.number,
    name: PropTypes.string
}

4、生命周期函数

constructor会在生命周期之前执行，执行了再去执行生命周期钩子

• 组件将要挂载时触发的函数：componentWillMount
• 组件挂载完成时触发的函数：componentDidMount
• 组件接收到一个新的 props时触发的函数：componentWillReceiveProps（这个方法在初始化render时不会被调用）
• 是否要更新数据时触发的函数：shouldComponentUpdate（组件挂载之后，每次调用setState后都会调用shouldComponentUpdate判断是否需要重新渲染组件。默认返回true，需要重新render。在比较复杂的应用里，有一些数据的改变并不影响界面展示，可以在这里做判断，优化渲染效率）
• 将要更新数据时触发的函数：componentWillUpdate（shouldComponentUpdate返回true或者调用forceUpdate之后，componentWillUpdate会被调用，调用后执行render）
• 组件完成更新后触发的函数：componentDidUpdate
• 组件将要销毁时触发的函数：componentWillUnmount