React学习04_props与state

1. props 是组件对外的接口

   • 组件内可以引用其他组件 组件之间的引用就形成了一个树状的接口，如果下层组件需要使用上层组件的数据
   • 上层组件就可以通过下层组件中 props 来进行数据的传递，因此props就是组件对外的接口

2. state是组件对内的接口

   • 除了使用上层组件传递的数据之外，他自身也可能有需要管理的数据 这个就是 state
   • 当数据改变时，状态就会改变
   • 声明渲染 – 数据改变 操作都不用我们关心，只需要我们管理好数据，react就会自动对于数据进行渲染

3. 主要区别:

   1. state 是可变的
   2. props对于当前组件是只读的

state

基本使用代码

<script type="text/babel">
class Com extends React.Component {
     constructor(props) {
         super(props)
         // 定义state
         this.state = {
             name: "西西"
         }
     }
     render() {
         return (
             // this.setState({key:newValue}) 异步的 react就会自动触发render进行数据渲染
             <div>
                 <button onClick={() => { this.setState({ name: "哈哈" }) }}>点我改变state数据</button>
                 <div>我是一个组件---{this.state.name}</div>
             </div>
         )
     }
 }
 ReactDOM.render(<Com />, document.getElementById("reactDom"))
</script>

setState

用于动态设置state里面的数据(自动渲染)
基本使用

<script type="text/babel">
// this.setState() 是异步的
class Com extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            name: "西西",
            newHtml: "<p>我是state中的内容</p>"
        }
    }
    fun = ()=>{
        this.setState({
            name:"哈哈"
        },()=>{
            console.log(this.state.name)
        }) //添加回调函数
    }

    render() {
        return (
            <div>
                <button onClick={this.fun}>点我修改</button>
                {this.state.name}

                <div>{this.state.newHtml}</div>
                {/*字符串标签插入的话  dangerouslySetInnerHTML = {{__html:你要插入的字符串}}*/}
                <div dangerouslySetInnerHTML={{__html:this.state.newHtml}}></div>
            </div>
        )
    }
}

ReactDOM.render(<Com />, document.getElementById("reactDom"))
</script>

props

是组件对外的接口，只读

function Com(props){
   return (
       <div>我是一个无状态组件-------外部传递的数据是: {props.text} --- {props.nums}</div>
   )
}

let obj = {
   text: "我是text数据",
   nums: "我是nums"
}


ReactDOM.render(<Com {...obj}/>, document.getElementById("reactDom"))

props验证

导包 npm i prop-types --save, 引入到html页面中

function Com(props){
    return (
        <div>我是无状态组件 --- {props.name} --- {props.age}</div>
    )
}
Com.defaultProps={
    name: "我是props中的name默认值"
}

Com.propTypes={
    name: PropTypes.number, // 验证props必须是number类型
    age: PropTypes.number.isRequired
}

let num = 9898
let age = 19
//props验证 --- 验证传递进来的数据是否符合我们期望了的类型或者要求 上线模式中取消props
// 引用 prop-types
ReactDOM.render(<Com name={num} age = {age}/>, document.getElementById("reactDom"))