react-类组件

319 阅读1分钟

1、普通组件:静态组件 函数组件,里面的值不能动,除非你从新render
2、类组件:

class 类名 extends React.PureComponent/Component{
    //继承了这两个类的实例
    constructor(porps){
        supper(porps);
        this.state={
            time:new Date().toLocaleString()
    }
};
    方法名(){
        内容在prototype原型上
    }
    static 方法名{
    内容在实例上;
}
    static defaultProps={
        //初始化状态属性值
        title:new Date().toLocaleString()
}
    static propTypes={
    //属性的规则指定
        title:PropTypes.string.isRequired//title不能不传的字符串内容
}
    render(){
        return{
            <p>this.state.time}</p>
        }
}
    componentDidMount(){
        //第一次加载组件渲染完毕
        this.setState({
            time:title:new Date().toLocaleString();
            //这个方法做了两个事
               //1、更改了time的值
                //2、强制渲染了
    }
}

3、属性的更改有两个方法:
* 1、设置默认值,让父组件再调用一次子组件,从新渲染就完了
* 2、把获取的属性赋值给组件状态,后期也可以修改
4、非受控组件:直接操作dom进行同步数据
* 1、render下的标签中加入ref 例如:<p ref={x=>this.timeBox=x;}>

* 2、在componentDidMount(){ this.timeBox.innerHtml=new Date().toLocaleString()} 5、要记得 * npm i prop-types * import PropTypes from 'prop-types'