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"))