react的数据渲染

react的数据渲染

react的书渲染分为两种，一种是props属性，一种是state状态

props

props外部传入

• 父组件通过属性的形式将数据绑定在子组件身上，子组件通过 this.props获得
• 外部传入的props只能通过外部修改

    
class App extends React.Component {
    name = 20000 // 实例属性
    render () {
        console.log( this ) // this 是通过 new App () 得到的实例
        return (
            <div>
            <Child name = { this.name }>//通过键值对的形式，单大括号
                this is a Child Component
            </Child>
            </div>
        )
    }
}

内部设置props

• 内部通过 className.defaultProps 来设置
• 注意：defaultProps 是 react 16.x版本的， react 15.x版本用的是 getDefaultProps() { return { 属性：属性值} }
• 内部设置的属性叫做类属性（ 静态属性 ）
• 内部设置的方法叫做类方法 （ 静态方法 ）
• 类属性 和 类方法 统称为 类成员
• 类成员 通过 关键字 static 来定义

class Child extends Component {
    static defaultProps = {//内部设置的props
        weight: '10斤',
        cry () {
             return '呜呜呜~~~~~~~~'
        }
    }

props的特殊使用方式

• children
• 使用：
  <Child> 内容 </Child>
this.props.children 就可以将组件的内容展示出来

    //children可以把父组件中标签里写的内容显示出来
render () {
    console.log( this.props )
    return (
        <div>
        child -- { this.props.name }
        <p> children -- { this.props.children } </p>
        </div>
    )
}

• props验证
• vue中是提供了props验证形式的，但是React中并没有 ， 所以React中借助第三方包来进行验证
• 这个包叫做 prop-types

    
    //这里检测的是父组件传过来的数据，
// 类的名称.propTypes = { 属性：PropTypes.类型 }
import propTypes from ' prop-types ';//一定要写对，不然没有检测的作用， propTypes
//写在类组件外
Child.propTypes = {
    name: PropTypes.string
}

state

1. state是自身的 – state 内部设置
2. state 定义形式
3. 直接在class 中定义
   class App extends React.Component { state = { } }
4. 在constructor中定义

class App extends React.Component {
    constructor () {
        super () // 继承父类this,一定要写
        this.state = {   }
    }
}

2. 用state来操控视图
3. state的修改使用 setState

this.setState({
    状态： 状态值
})

1. setState 参数问题

• setState可以有两个参数
• 第一个参数可以是一个对象

this.setState( {
状态: 新状态值
})

• 第一个参数可以是一个函数，这个函数我们给起了名称，叫做 updater

this.setState( ( preState, props) => {
    return {
        状态： 新状态值
    }
})

• 第二个参数是一个回调函数，回调函数的目的是为了做异步

// this.setState( obj||fn,callback )
this.setState({
状态： 新状态值
}, () => {
//目的是为了异步
})