React ——props

React ——props

初学react-props，在网上搜索到了一篇对我帮助很大的文章，以此为借鉴，附上文章地址：https://segmentfault.com/a/1190000011184076 ，以表感谢！！！现记录一下自己的学习过程，以备后续(ps：文章中文字表述摘自上篇文章，代码为自己联系的demo)~~

props

React的核心思想就是组件化思想，页面会被切分成一些独立的、可复用的组件。
组件从概念上看就是一个函数，可以接受一个参数作为输入值，这个参数就是props，所以可以把props理解为从外部传入组件内部的数据。由于React是单向数据流，所以props基本上也就是从服父级组件向子组件传递的数据。

props的用法

{this.props.xxx}

props的只读性

props经常被用作渲染组件和初始化状态，当一个组件被实例化之后，它的props是只读的，不可改变的。如果props在渲染过程中可以被改变，会导致这个组件显示的形态变得不可预测。只有通过父组件重新渲染的方式才可以把新的props传入组件中

父组件：Home

import React from 'react';
import Children from './children'
import '../css/home.scss';
import {NavBar,Icon,SearchBar} from 'antd-mobile';

class Home extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            value:"小明"     
        }
    }

    inputChange(){
        let val=this.refs.searchValue.value;
        this.setState({
            value:val
        })
    }

    searchClick(){
        console.log(this.state.value)
    }
    
    render(){
        return(
            <div className="faterCom">
                <NavBar icon={<Icon key="1" type="left" />}>state</NavBar>
                <div className="topsearch"><input type="text" placeholder="请输入关键字" className="search" ref='searchValue' onChange={()=>this.inputChange()}/><span onClick={this.searchClick.bind(this)}>搜索</span></div>
                
                //在父组件中引入子组件，使用msg={this.state.value}方法将父组件中的值传给子组件
                <Children msg={this.state.value}></Children>  
            </div>
        )
    }
}



export default Home;

子组件Children

import React from 'react';
// import '../css/home.scss';
import {NavBar,Icon,List,DatePicker} from 'antd-mobile';

class Children extends React.Component {
    constructor(props){
        super(props);
        console.log(props);     //打印从父组件中传来的值，结果：{msg: "小明"}
        this.state = {

        }
    }

    render(){
        return(
            <div> </div>
        )
    }
}

export default Children;

props设置默认参数

在组件中，我们最好为props中的参数设置一个defaultProps，并且制定它的类型

props的类型检查——PropTypes

1. 安装：npm install prop-types --save-dev
2. 引入：import PropTypes from ‘prop-types’;
   (注：React v15.5 起, React.PropTypes 已移入另一个包中, 请使用 prop-types 库代替)
3. 使用：
   (注：当传入的 prop 值类型不正确时，JavaScript 控制台将会显示警告。出于性能方面的考虑，propTypes 仅在开发模式下进行检查。)

    Children.prototypes={
    name:PropTypes.string.isRequire
	}

类型：

1.字符串类型PropTypes.string
2. 布尔类型PropTypes.bool
3. 函数类型PropTypes.func
4. 数组类型PropTypes.array
5. 数字类型PropTypes.number
6. 对象类型PropTypes.object
7. 元素PropTypes.element
8. 传入任何东西都可以PropTypes.node
9. 选择特定值PropTypes.oneOf([‘是’, ‘否’, “是否”])
10. 选择诸多类型中的一种（任意类型）PropTypes.oneOfType：
11. 具有某种类型的数组PropTypes.arrayOf(PropTypes.number)：
12. 具有某种类型属性值的对象PropTypes.objectOf(React.PropTypes.number)
13. 样式类型PropTypes.shape
14. 任何数据类型PropTypes.any.isRequired

更多类型可见React中文文档：https://react.docschina.org/docs/typechecking-with-proptypes.html

总结

props是一个从外部传进组件的参数，主要作为就是从父组件向子组件传递数据，它具有可读性和不变性，只能通过外部组件主动传入新的props来重新渲染子组件，否则子组件的props以及展现形式不会改变