React环境搭建及学习

淩亂°似流年 2023-07-03 04:46 5阅读 0赞

### 简介 ###

> 来自菜鸟教程
> 
> 1.  React 是一个用于构建用户界面的 JAVASCRIPT 库。
> 2.  React **特点** ：
> 
>  *  声明式设计 −React采用声明范式，可以轻松描述应用。
>  *  高效 −React通过对DOM的模拟，最大限度地减少与DOM的交互。
>  *  灵活 −React可以与已知的库或框架很好地配合。
>  *  JSX − JSX 是JavaScript 语法的扩展。React 开发不一定使用 JSX ，但我们建议使用它。
>  *  组件 − 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。
>  *  单向响应的数据流− React实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。  
>     **关于vue和react的双向数据绑定和单向数据绑定的几篇好文**：`https://www.jianshu.com/p/810464f1a576`  
>     `https://www.jianshu.com/p/4ec74cb5b748`
> 
> 1.  **元素是构成 React应用的最小单位**，它用于描述屏幕上输出的内容。 React元素都是不可变的。当元素被创建之后，你是无法改变其内容或属性的。目前更新界面的唯一办法是创建一个新的元素，然后将它传入`ReactDOM.render()` 方法。 除了函数外我们还可以创建一个 `React.Component` 的 ES6类，该类封装了要展示的元素，需要注意的是在 `render()` 方法中，需要使用 `this.props` 替换 `props`。 值得注意的是React DOM **首先会比较元素内容先后的不同，而在渲染过程中只会更新改变了的部分。**
> 2.  React 使用 JSX 来替代常规的JavaScript。JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。我们不需要一定使用 JSX，但它有以下优点：
> 
> >  *  JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。
> >  *  它是类型安全的，在编译过程中就能发现错误。
> >  *  使用 JSX 编写模板更加简单快速。
> 
> 1.  React State(状态)  
>     React 把组件看成是一个**状态机（`State Machines`）**。通过与用户的交互，实现不同状态，然后渲染 UI，**让用户界面和数据保持一致**。React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面（不要操作 DOM）。
> 2.  React Props  
>     `state` 和 `props` 主要的区别在于 props 是不可变的，而 state 可以根据与用户交互来改变。这就是为什么有些容器组件需要定义 state 来更新和修改数据。 而子组件只能通过 props 来传递数据。

### 一、React 开发环境搭建： ###

1） 安装nodejs  
2） 安装好node之后 在cmd检查版本

> node –v

3） 安装cnpm 代替npm 在百度上搜索cnpm 找淘宝镜像（http://npm.taobao.org/）

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70]  
在当前页面上下拉找：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 1]  
复制去cmd安装cnpm  
4） 安装完成之后 检查版本 cnpm –v 输出以下为安装完成：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 2]  
安装yarn 依赖工具（https://yarn.bootcss.com/）  
在中文官网里面有windows安装yarn的方式。

> yarn是快速可靠，安全的依赖管理工具  
> 官网：https://yarn.bootcss.com/

5） 简单安装yarn cnpm install -g yarn 或者 npm install –g yarn  
6） 安装完成之后 检查yarn的版本 yarn –v

7） cmd命令窗口切换到E盘：进入你创建的目录

8） 输入创建项目的命令 create-react-app demo  
项目创建完成之后，会在你的项目目录里面生成你创建的文件

9） Cd到刚刚创建的项目里面  
npm start 或者yarn start 运行  
npm run build 或者yarn build 生成项目  
10） 运行之后  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 3]  
React项目创建成功  
11） 目录整理  
Src文件为开发文件（对src文件进行开发整理）

### 二、声明组件 ###

> 1.  组件起名称时首字母大写
> 2.  组件里面有多个元素的时候注意：在return里面返回元素只有一个父元素 且在（）里面写标签
> 3.  在vsCode种写代码没智能提示 ：添加typings扩展组件

创建组件文件

import React, {  Component } from 'react';

import React from 'react';
    import '../Css/App.css';
    //引入组件
    import Header from '../Component/Header/Header.js';
    import BodyContent from '../Component/Body/Body.js';
    import Footer from '../Component/Footer/Footer.js';
    function App() { 
      return 
        <div className="App"> </div>
    }
    //暴露
    export default App;

如果要返回多个标签，返回元素只能有一个父标签，并且要带括号

import React,{ Component} from 'react'
    
    //组件的类
    class body extends Component{ 
        render(){ 
            return(
                <div>
                    <span>我是组件</span>
                    <span>多个元素写法</span>
                </div>
            );
        }
    }
    export default body;

### 三、在组件里面声明数据 ###

> 1.  在组件的class种声明类的构造函数constructor 在构造函数里面必须写super（）否则报错：
> 
> > super关键字，它指代父类的实例（即父类的this对象）。子类必须在constructor方法中调用super方法，否则新建实例时会报错。这是因为子类没有自己的this对象，而是继承父类的this对象，然后对其进行加工。如果不调用super方法，子类就得不到this对象。
> 
> 参考博客：https://blog.csdn.net/u010379595/article/details/82393021  
> 2. 如果你用到了constructor就必须写super(),是用来初始化this的，可以绑定事件到this上;  
> 3. 如果你在constructor中要使用this.props,就必须给super加参数：super(props) ;  
> 4. 如果没用到constructor，在render中this.props都是可以使用的，这是React自动附带的。附上如下代码理解：

class HelloMessage extends React.Component{ 
        render (){ 
            return (
                <View>
                    <Text>nice to meet you! { this.props.name}</Text>
                </View>
            );
        }
    }
    //不过这种只是用render的情况，使用一般的ES6函数写会更简便：
    const HelloMessage = (props)=>(
        <View>
           <Text>nice to meet you! { this.props.name}</Text>
        </View>
    )

##### 1. 数据绑定 #####

> 1.  在组件里声明当前组件要使用的数据，声明构造函数constructor
> 2.  定义react数据 在`this.state`上声明(变量，数组，对象)
> 3.  声明完后绑定到标签上 \{\}

//引入react
    import React from 'react';
    //使用当前组件的css
    import './Header.css';
    class Header extends React.Component { 
        //在组件里声明当前组件要使用的数据
        //1.声明构造函数constructor
        constructor() { 
            super();
            //2.定义react数据 在this.state上声明
            this.state={ 
                title:"标题2",
                  arr: [0, 1, 2, 3, 4, 5, 6],
                obj: [
                    { 
    
                        "name": "张三",
                        "sex": "男",
                        "hobby": ["篮球", "足球", "乒乓球"]
                    },
                    { 
                        "name": "李四",
                        "sex": "男",
                        "hobby": ["篮球", "羽毛球"]
                    }
                ]
            }
        }
        //3.声明完后绑定到标签上 {}
        render() { 
            return (
                <div className='Header'>
                   
                    <div>
                        { this.state.title}
                    </div>
                     <p>数组绑定</p>
                    <div>
                        { this.state.arr.map((val, index) => { 
                            return <span key={ index}>{ val}</span>
                        })}
                    </div>
                    <p>对象绑定</p>
                    <div>
                        { 
                            this.state.obj.map((val, index) => { 
                                return (<p key={ index}>
                                    姓名：<span>{ val.name}</span>,
                                        爱好：{ 
                                        val.hobby.map((v, i) => { 
                                            return (
                                                <span key={ i}>{ v}</span>
                                            )
                                        })
                                    }
                                </p>)
                            })
                        }
                    </div>
                </div>
            )
    
        }
    }
    export default Header;

##### 2. 在组件里面属性的绑定 #####

> 1.  label标签：  
>     `<label>` 标签为 input 元素定义标注（标记）。  
>     有显式使用（一般）和隐式使用（把input嵌在label中）  
>     label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label  
>     元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
> 
> `<label>` 标签的 for 属性应当与相关元素的 id 属性相同。

import React,{ Component} from 'react'
    	
    	import "../assets/css/index.css"
    	//组件的类
    	class Cart extends Component{ 
    	    constructor(){ 
            super();
    	        //数据
    	        this.state={ 
    	            title:"绑定title",
    	            color:"color",
    	           isstyle: { 
                    width: "3rem",
                    height: "3rem",
                    backgroundColor: "pink",
                    margin: "auto"
                }
    	    }
    	    render(){ 
    	        return(
    	            <div>
    	                <span>在这里绑定属性</span>
    	                <br/>
    	                { /* 普通属性的绑定 */}
    	                <div title={ this.state.title}>给我绑定title属性</div>
    	                { /* class属性和上面类的关键字冲突 必须换为className */}
                    <div className="color">绑定class属性</div>
    	                { /* 动态绑定className */}
    	                <div className={ this.state.color}>动态绑定class</div>
    	                { /* for属性和js里面的for循环一样 */}
    	                <label htmlFor="name">绑定for</label>
    	                <input id="name" type="text"/>
    	                { /* 绑定style属性 */}
    	                <div style={ { "color": "red"}}>绑定style属性</div>
    	                <div style={ this.state.style}>绑定style属性</div>
    	            </div>
    	        );
    	    }
    	}
    	//暴露
    	export default Cart;

##### 3. 图片的src引入问题 #####

> 1.  图片标签上必须有alt属性
> 2.  图片的title属性移动端时不显示
> 3.  图片路径的写法  
>     ![在这里插入图片描述][2020020215431320.png]  
>     如果在静态资源目录中，路径可以为远程路径  
>     `imgsrc: "http://localhost:8080/logo192.png"`或者`imgsrc: "logo192.png`
> 
> 如果在当前工程目录src下  
> 可以import相对路径或者require相对路径  
> `import imgsrci from '../../image/logo192.png'`或  
> `src={require('../../image/logo192.png')}`

##### 4.数组直接绑定标签 #####

> JSX 允许在模板中插入数组，数组会自动展开所有成员

import React, {  Component } from 'react';
    import './Body.css';
    
    class Body extends Component { 
        constructor() { 
            super();
            this.state = { 
                //数组里直接生成标签
                ele: [<div>1</div>, <div>2</div>, <div>3</div>]
            };
        }
        render() { 
            return (
                <div className="BodyContent">
                    <div>数组直接绑定标签</div>
                    { 
                         this.state.ele//标签直接显示
                    }
                   { 
                        this.state.ele.map((v,i)=>{ 
                        return(
                            <div key={ i}>{ v}</div>//循环后每个标签都有一个div包着
                        )
                        })
                   }
                </div>
            );
        }
    }
    export default Body;

### 四、 React事件方法 ###

> 1.  React 元素的事件处理和 DOM 元素类似。但是有一点语法上的不同:  
>     React 事件绑定属性的命名采用驼峰式写法，而不是小写。例如`onclick`变为`onClick`  
>     如果采用 JSX 的语法你需要传入一个函数作为事件处理函数，而不是一个字符串(DOM 元素的写法)
> 2.  JSX:React 使用 JSX 来替代常规的 JavaScript. JSX 是一个看起来很像 XML 的 JavaScript 语法扩展.由于 JSX 就是 JavaScript，*一些标识符像 `class` 和 `for` 不建议作为 XML 属性名。作为替代，React DOM 使用 `className` 和 `htmlFor` 来做对应的属性。*
> 
>  *  JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。
>  *  它是类型安全的，在编译过程中就能发现错误。
>  *  使用 JSX 编写模板更加简单快速。
> 
> 1.  react和html的另一个不同;不能使用返回 `false` 的方式阻止默认行为， 你必须明确的使用 `preventDefault`
> 2.  关于this的使用：类的方法默认是不会绑定 `this` 的。如果你忘记绑定 `this.handleClick` 并把它传入 onClick, 当你调用这个函数的时候 this 的值会是 undefined。这并不是 React 的特殊行为；它是函数如何在 JavaScript 中运行的一部分。**通常情况下，如果你没有在方法后面添加 () ，例如 onClick=\{this.handleClick\}，你应该为这个方法绑定 this。**
> 3.  XML：XML是不作为的，仅仅是纯文本，不是对html的替代，而是对它的补充
> 
>  *  `XML` 被设计用来**传输和存储数据**。`HTML` 被设计用来**显示数据**。
>  *  XML 被设计为传输和存储数据，其焦点是数据的内容。
>  *  HTML 被设计用来显示数据，其焦点是数据的外观。
>  *  HTML 旨在显示信息，而 XML 旨在传输信息。

##### 1. 方法的声明和事件的写法 #####

因为this指针的问题所以有了以下三种方法，需要将this指向为当前实例

> 1.  事件函数使用箭头函数
> 2.  在调用事件函数时通过bind（this）原地绑定，该种方式写起来比较简单，但是每次执行bind方法都会生成一个新的函数，势必会有额外的开销
> 3.  在`constructor`中提前对事件进行绑定：虽然没有额外开销，但写起来有些复杂。以后要对每个事件都要在构造器中再进行一次绑定
> 4.  react中事件设置值时必须使用`this.setState()`不能直接赋值

import React, {  Component } from "react";
    //react事件
    class Footer extends Component { 
        constructor(props) { 
            super(props);
            this.state = { 
                msg: "这是一个消息！",
                value: 0,
                ck: [
                    {  ck: true, hobby: "篮球" },
                    {  ck: true, hobby: "足球" },
                    {  ck: true, hobby: "乒乓球" }
                ]
            };
            // 这边绑定是必要的，这样 `this` 才能在回调函数中使用
            this.getmessage = this.getmessage.bind(this);
        }
        //事件方法1 箭头函数保持上下指针一致
        getdata = () => { 
            console.log(this.state.msg);
        }
        //事件方法2 调用方法时bind绑定指针（给方法传递当前指针）
        getmsg() { 
            console.log(this.state.msg);
        }
        //事件方法3 在构造函数中传递当前指针
        getmessage() { 
            console.log(this.state.msg);
        }
        render() { 
            return (
                <div>
                    <p>这是底部组件</p>
                    <button onClick={ this.getdata}>事件方法一</button>
                    <button onClick={ this.getmsg.bind(this)}>事件方法二</button>
                    <button onClick={ this.getmessage}>事件方法三</button>
                </div>
            );
        }
    }
    export default Footer;

##### 2. 事件调用方法传参 #####

> **通过 bind 方式向监听函数传参，在类组件中定义的监听函数，事件参数 e 要排在所传递参数的后面**

import React, {  Component } from "react";
    //react事件
    class Footer extends Component { 
        //最后一个参数是事件参数e,如果不写e则依次是第一个参数，第二个参数……
        getcs(a) { 
            console.log(a)//1
        }
        render() { 
            return 
                  <button onClick={ this.getcs.bind(this, 1, 2)}>事件的参数传递</button>                    
    }
    
    export default Footer;

##### 3. react中ref获取dom元素节点 #####

import React, {  Component } from "react";
    //react事件
    class Footer extends Component { 
        constructor() { 
            super();
            this.state = { 
            };
        }
        //事件获取元素
        getclick() { 
            console.log(this.refs.name);// <div>内容已经被修改辣！</div>
            this.refs.name.innerHTML = "内容已经被修改辣！"
        }
        render() { 
            return (<div>
                    <div ref="name">ref获取元素</div>
                    <button onClick={ this.getclick.bind(this)}>获取元素</button>  
                    <div/>
                    )             
    }
    export default Footer;

#### 4. 键盘事件+表单事件 ####

> 1> data- 自定义元素属性 getAttribute（“自定义名称”）获取自定义属性  
> 2. 表单元素的限制性约束和非限制性约束
> 
> > 参考一个大佬的博客，博客链接：`https://blog.csdn.net/lihongxun945/article/details/46730835`
> 
> **约束性组件**，就是由`React`管理了它的`value`，而**非约束性组件**的`value`就是**原生的DOM**管理的。( `defaultValue` 其实就是原生DOM中的 value 属性。这样写出的来的组件，其value值就是用户输入的内容，React完全不管理输入的过程。)  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 4]
> 
>  *  select checkbox input textarea为value属性,要使用onchange监听
>  *  ``javascript If the field should be mutable use `defaultValue`. Otherwise, set either `onChange` or `readOnly`. 如果字段应该是可变的使用'defaultValue '。否则，设置“onChange”或“readOnly”。``

import React from 'react';
    class Eventinfo extends React.Component{ 
        constructor (){ 
            super();
            this.state={ 
                msg:"事件对象"
            }
        }
        getEvent=(event)=>{ 
            //事件的参数 event
            //获取当前元素节点
            let btn=event.target;
            //操作当前元素节点的属性（自定义属性等等）
            console.log(btn.getAttribute("data-user"));
        }
        render(){ 
            return (
                <div>
                    <h1>{ this.state.msg}</h1>
                    <br/>
                    { /* 事件对象的说明 */}
                    <button onClick={ this.getEvent} data-user="123">事件对象</button>
                </div>
            );
        }
    }
    export default Eventinfo;

> 2）表单事件以及获取表单元素的值
> 
>  *  1.监听表单元素的文本变化
>  *  2.赋值给state上的变量(this.setState)  
>     官网：在 HTML 当中，像 `<input>, <textarea>`, 和 `<select>` 这类表单元素会维持自身状态，并根据用户输入进行更新。但在React中，可变的状态通常保存在组件的状态属性中，并且只能用 `setState()` 方法进行更新。  
>     赋值时如果直接操作原有变量会报警告，`Do not mutate state directly. Use setState() react/no-direct-mutation-state` 不要直接改变状态。
>  *  3.事件获取

import React, {  Component } from "react";
    //react事件
    class Footer extends Component { 
        constructor(props) { 
            super(props);
            this.state = { 
                msg: "这是一个消息！",
                value: 0,
                ck: [
                    {  ck: true, hobby: "篮球" },
                    {  ck: true, hobby: "足球" },
                    {  ck: true, hobby: "乒乓球" }
                ]
            };
        }
        //react中表单 以及数据双向绑定
        getchange(e) { 
            let val = e.target.value;
            this.setState({ 
                value: val
            })
        }
        getbox(index, e) { 
            console.log(index);
            let checked=this.state.ck;//不直接操作state中的变量
            checked[index].ck = !checked[index].ck;
            this.setState({ 
                ck: checked
            })
            console.log('====================================');
            console.log(e.target.value);
            console.log('====================================');
        }
        render() { 
            return (
                <div>
                    <p>checkbox 表单数据绑定和数据双向</p>
                    <ul>  { 
                        this.state.ck.map((val, index) => { 
                            return (
                                <li key={ index}><input type='checkbox' value={ val.hobby} checked={ val.ck} onChange={ this.getbox.bind(this, index)} />{ val.hobby}</li>
                            )
                        })
                    }</ul>
                    <p>react中事件设置值时必须使用this.setState()不能直接赋值</p>
                    <p>input 实现数据双向</p>
                    <p>{ this.state.value}</p>
                    <input value={ this.state.value} onChange={ this.getchange.bind(this)} />
                </div>
            );
        }
    }
    
    export default Footer;

键盘事件类似

### 五、子父组件传值 ###

> 1.  Props 验证 `React.PropTypes` 在 React v15.5 版本后已经移到了 `prop-types` 库。  
>     约束数据类型 ，如果传递的值不符合约束条件则报错
> 2.  默认props值：`defaultProps`:父组件传值中，如果父组件调用子组件不传值，可以在子组件中使用defaultProps定义默认的值； 类名.`defaultProps`
> 3.  这两个都是给子组件使用的

##### 1. 父组件给子组件传值 #####

> 1.  先把父组件挂到主模板上
> 2.  把子组件引入父组件
> 3.  在引入的子组件上通过变量传递参数(name、method)
> 4.  子组件通过props获取变量、执行函数

*  传递对象
 *  传递方法  
    父组件：

import React, {  Component } from 'react'
    import Son from '../Son/Son'
    class Main extends Component { 
        constructor() { 
            super();
            this.state = { };
        }
        getsondata() { 
            console.log("这是我给子组件传递的方法！");
        }
        render() { 
            return (
                <div>
                    <p>我是父组件</p>
                    //传递方法，变量
                    <Son name="这是我给子组件传递的值" method={ this.getsondata} ></Son>
                </div>
            );
        }
    }
    
    export default Main;

子组件：

import React, {  Component } from 'react'
    
    class Son extends Component { 
        constructor(props) { 
            super(props);
            this.state = { };
        }
        componentDidMount() { 
            this.props.method();//执行父组件的方法
        }
        render() { 
            return (
                <div>
                    <p>我是子组件</p>
                    <p>{ this.props.name}</p>//获取变量
                </div>
            );
        }
    }
    export default Son;

##### 2. 子组件给父组件传值 #####

> 1.  通过`ref`能获取到整个子组件，所以可以。传递参数，父组件也可以执行子组件的方法
> 2.  子组件的方法虽然看不到，但是可以直接使用

父组件：

import React, {  Component } from 'react'
    import Son from '../Son/Son'
    class Main extends Component { 
        constructor() { 
            super();
            this.state = { };
        }
        componentDidMount() { 
            console.log(this.refs.child.state.msg);//获取子组件的变量
            this.refs.child.sendtofather();//执行子组件的方法
        }
        getsondata() { 
            console.log("这是我给子组件传递的方法！");
        }
        render() { 
            return (
                <div>
                    <p>我是父组件</p>
                    <Son name="这是我给子组件传递的值" method={ this.getsondata} ref='child'></Son>
                </div>
            );
        }
    }
    
    export default Main;

子组件：

import React, {  Component } from 'react'
    
    class Son extends Component { 
        constructor(props) { 
            super(props);
            this.state = { 
                msg: "这是子组件的内容"
            };
        }
        componentDidMount() { 
            this.props.method();//执行父组件的方法
        }
        sendtofather() { 
            console.log("子组件给父组件传递内容");
        }
        render() { 
            return (
                <div>
                    <p>我是子组件</p>
                    <p>{ this.props.name}</p>
                </div>
            );
        }
    }
    export default Son;

还可以通过子组件调用父组件的方法时，通过参数，将值传给父组件  
子组件：

import React, {  Component } from 'react'
    
    class Son extends Component { 
        constructor(props) { 
            super(props);
            this.state = { 
                msg: "这是子组件的内容"
            };
        }
        componentDidMount() { 
            this.props.method(this.state.msg);//执行父组件的方法时传递了参数
        }
        sendtofather() { 
            console.log("子组件给父组件传递内容");
        }
        render() { 
            return (
                <div>
                    <p>我是子组件</p>
                    <p>{ this.props.name}</p>
                </div>
            );
        }
    }
    
    export default Son;

父组件的方法接收参数，这样就拿到了子组件的变量值

import React, {  Component } from 'react'
    import Son from '../Son/Son'
    class Main extends Component { 
        constructor() { 
            super();
            this.state = { };
        }
        componentDidMount() { 
            console.log(this.refs.child.state.msg);
            this.refs.child.sendtofather();
        }
        getsondata(msg) { //通过参数传递拿到了子组件的变量
            console.log(msg);//子组件的消息
        }
        render() { 
            return (
                <div>
                    <p>我是父组件</p>
                    <Son name="这是我给子组件传递的值" method={ this.getsondata} ref='child'></Son>
                </div>
            );
        }
    }
    
    export default Main;

##### 3. 验证合法性（约束数据类型）及设置默认值 #####

> 如果父组件中传递了值就会修改覆盖默认值  
> 如：`<Son setname="我要修改默认值" method={this.getsondata} ref='child'></Son>`

import React, {  Component } from 'react'
    import PropTypes from 'prop-types'
    class Son extends Component { 
        constructor(props) { 
            super(props);
            this.state = { 
                msg: "子组件的消息"
            };
        }
        render() { 
            return (
                <div>
                    <p>我是子组件</p>
                    <p>{ this.props.setname}</p>
                </div>
            );
        }
    }
    //设置默认值 组件名.defaultProps
    Son.defaultProps={ 
        setname:"默认值"
    }
    //约束数据类型 
    Son.propTypes={ 
        name:PropTypes.string,
        method:PropTypes.func
    }
    export default Son;

### 六、组件生命周期 ###

React 生命周期分为三种状态 1. 初始化 2.更新 3.销毁

> `componentDidMount()`比较常用，页面加载完成调用

1.  初始化  
    1、`getDefaultProps()`  
    设置默认的props，也可以用dufaultProps设置组件的默认属性.  
    2、`getInitialState()`  
    在使用es6的class语法时是没有这个钩子函数的，可以直接在constructor中定义this.state。此时可以访问this.props  
    3、`componentWillMount()`  
    组件初始化时只调用，以后组件更新不调用，整个生命周期只调用一次，此时可以修改state。  
    4、 `render()`  
    react最重要的步骤，创建虚拟dom，进行diff算法，更新dom树都在此进行。此时就不能更改state了。  
    5、`componentDidMount()`  
    组件渲染之后调用，只调用一次。
2.  更新  
    6、`componentWillReceiveProps(nextProps)`  
    组件初始化时不调用，组件接受新的props时调用。  
    7、`shouldComponentUpdate(nextProps, nextState)`  
    react性能优化非常重要的一环。组件接受新的state或者props时调用，我们可以设置在此对比前后两个props和state是否相同，如果相同则返回false阻止更新，因为相同的属性状态一定会生成相同的dom树，这样就不需要创造新的dom树和旧的dom树进行diff算法对比，节省大量性能，尤其是在dom结构复杂的时候  
    8、`componentWillUpdata(nextProps, nextState)`  
    组件初始化时不调用，只有在组件将要更新时才调用，此时可以修改state  
    9、`render()`  
    组件渲染  
    10、`componentDidUpdate()`  
    组件初始化时不调用，组件更新完成后调用，此时可以获取dom节点。
3.  卸载  
    11、`componentWillUnmount()`  
    组件将要卸载时调用，一些事件监听和定时器需要在此时清除。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200202123716806.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200202123733454.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200202123755372.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200202133324162.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5,size_16,color_FFFFFF,t_70
[2020020215431320.png]: https://img-blog.csdnimg.cn/2020020215431320.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200203204644231.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5,size_16,color_FFFFFF,t_70