3.react入门之三大核心属性之一props

state与props区别：props是不可变的，而state可根据用户交互来改变，这就是为什么有些容器组件需要定义 state 来更新和修改数据。 而子组件只能通过 props 来传递数据。
使用：

class App extends React.Component {
    state = {
        list: [
            { title: "吃鸡腿", id: 0 },
            { title: "吃鸭腿", id: 1 },
            { title: "吃鸟腿", id: 2 },
        ]
    }
    spliceList = (id) => {
        let { list } = this.state;
        list.splice(this.state.list.findIndex(item => item.id == id), 1)
        this.setState({
            list
        })
    }
    render() {
        return (
            <div>
            //通过给子组件添加list属性进行传值
                <AppChild list={this.state.list} on={this.spliceList}></AppChild>
            </div>
        )
    }
}
// 子组件  类式组件接收
class AppChild extends React.Component {
//在类式组件内通过this.props接收查看父组件传递的参数，
//在函数式组件可通过函数接收props参数
    render() {
        return (
            <div>
                {
                    this.props.list.map(item => (<div key={item.id}>
                        {item.title}
                        <span style={{ paddingLeft: "20px" }} onClick={() => this.props.on(item.id)}>
                            删除
                        </span>

                    </div>))
                }
                <Fn></Fn>
            </div>
        )
    }
}

默认props
可以通过defaultProps为props设置默认值

// 父组件
class App extends React.Component {
    state = {
        list: [
            { title: "吃鸡腿", id: 0 },
            { title: "吃鸭腿", id: 1 },
            { title: "吃鸟腿", id: 2 },
        ]
    }
    spliceList = (id) => {
        let { list } = this.state;
        list.splice(this.state.list.findIndex(item => item.id == id), 1)
        this.setState({
            list
        })
    }
    render() {
        return (
            <div>
                <AppChild list={this.state.list} on={this.spliceList}></AppChild>
                <Appfn list={this.state.list}></Appfn>
            </div>
        )
    }
}
// 子组件
class AppChild extends React.Component {
    render() {
        return (
            <div>
                {
                    this.props.list.map(item => (<div key={item.id}>
                        {item.title}
                        <span style={{ paddingLeft: "20px" }} onClick={() => this.props.on(item.id)}>
                            删除
                        </span>

                    </div>))
                }
                <Fn></Fn>
            </div>
        )
    }
}
//设置默认值
AppChild.defaultProps={
	a:[1,2,3]
}

props验证
React.propsTypes已在React15.5版本移入prop-types库内

//使用先需要引入
import PropsTypes from "prop-types"
class AppChild extends React.Component {
    render() {
        return (
            <div>
                {
                    this.props.list.map(item => (<div key={item.id}>
                        {item.title}
                        <span style={{ paddingLeft: "20px" }} onClick={() => this.props.on(item.id)}>
                            删除
                        </span>

                    </div>))
                }
                <Fn></Fn>
            </div>
        )
    }
}
//通过设置静态属性propTypes为当前props设置类型限制
AppChild.propTypes={
	//限制name类型为string  如果需要限制必穿则.isRequired
	name:PropTypes.string  //必穿的话 PropTypes.string.isRequired
}