react的数据渲染
react的书渲染分为两种,一种是props属性,一种是state状态
props
props外部传入
父组件通过属性的形式将数据绑定在子组件身上,子组件通过 this.props获得 外部传入的props只能通过外部修改
class App extends React. Component {
name = 20000
render ( ) {
console. log ( this )
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 = {
weight: '10斤' ,
cry ( ) {
return '呜呜呜~~~~~~~~'
}
}
props的特殊使用方式
children 使用: <Child> 内容 </Child>
this.props.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
import propTypes from ' prop-types ' ;
Child. propTypes = {
name: PropTypes. string
}
state
state是自身的 – state 内部设置 state 定义形式 直接在class 中定义 class App extends React.Component { state = { } }
在constructor中定义
class App extends React. Component {
constructor ( ) {
super ( )
this . state = { }
}
}
用state来操控视图 state的修改使用 setState
this.setState({
状态: 状态值
})
setState 参数问题
setState可以有两个参数 第一个参数可以是一个对象
this . setState ( {
状态: 新状态值
} )
第一个参数可以是一个函数,这个函数我们给起了名称,叫做 updater
this . setState ( ( preState, props) => {
return {
状态: 新状态值
}
} )
第二个参数是一个回调函数,回调函数的目的是为了做异步
this . setState ( {
状态: 新状态值
} , ( ) => {
} )