一、react中的state

??每个组件可以拥有自己的data数据,并且这个数据是自己独享

??在react中我们需要使用state(状态)来表示我们每一个组件自己的data数据

? react中state需要在构造函数中进行设置??类似于vue中data???data()?{}

??react中state状态设置

constrcutor(props)?{

????????????super(props)??//?超类

????????????this.state={

????????????????//?data数据

????????????}

????????}

同时?我们需要使用this.state.属性名?来获取?state里边设置的data数据

列如：

 <div id="app"></div>
    <script type="text/babel">
    var num=123
    class Child extends React.Component{
        // 构造函数
        constructor(props) {
            super(props)
            this.state={
                num: 456,
                stus: {
                    name: '张三',
                    age: 15,
                    sex: '男',
                    score: 98
                },
                arr: ['标题一','标题二','标题三'],
                bool: false
            }
        }
        render() {
            return(
                <div className="child">
                    child--{num}--{this.state.num}
                    <p>姓名: {this.state.stus.name}</p>
                    <p>性别: {this.state.stus.sex}</p>
                    <p>{this.state.arr[0]}</p>
                    <p style={{display: this.state.bool?'block':'none'}}>这是一段文本内容</p>
                </div>
            )
        }
    }

二、props的使用

???react中组件之间的关系就两种

????????????父子

????????????非父子

????????props可以作为在react中父组件向子组件传值的一种形式

????????步骤：

????????????1?在父组件中找到子组件标签?在子组件标签上边写上自定义属性名等于要传递的数据

????????????<子组件标签名?自定义属性名="要传递的数据"></子组件标签名>

????????????2?在子组件的模板中?通过this.props.自定义属性名?来获取父组件向子组件传递的数据

????????????{this.props.自定义属性名}

? ? ? ? ? ?state与props关系区别

???????????1?state你可以认为是用来设置组件的data数据

?????????????props是进行组件传值的

???????????2?props是不可变的?但是state可以根据与用户的交互进行动态改变

????????????我们需要通过state来更新或者修改数据??

????????????而子组件只能通过props来获取传递的数据

????????react注释

????????????{/*?要注释的内容?*/}

????????react封装的组件?是独立存在的??即便是同一个组件?被多次调用??但是之间保持独立的关系

????????注意：

????????????react自定义组件标签中不能直接写内容??写了也不显示

????????????如果想要react组件标签中写的内容显示出来?我们需要给自定义的组件模板中使? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?用?this.props.children

????????????例如：

????????????????<自定义组件标签名>内容</自定义组件标签名>

????????????????//?内容可以是任意数据?

????????????????自定义组件的模板中使用?this.props.children

????????????????????return(

????????????????????????<div>{this.props.children}</div>

????????????????????)

 <div id="app"></div>
    <script type="text/babel">
    class Child extends React.Component{
        constructor(props) {
            super(props)
            this.state={
                num: 123
            }
        }
        render() {
            return(
                // <div className="child">child-{this.state.msg}-{this.props.text}-{this.props.name}-{this.props.arr[1]}</div>
                <div className="child">
                    {this.props.children}--child--{this.props.name}-{this.props.text}  {this.props.play}  
                </div>
            )
        }
    }
    // parent是child的父组件
    class Parent extends React.Component{
        constructor(props) {
            super(props)
            this.state={
                msg: 'hello world',
                arr: [1,2,3],
                obj: {
                    name: '张三'
                }
            }
        }
        render() {
            return(
                <div className="parent">
                    parent--{this.state.msg}
                    <Child>
                        <div className="demo">demo测试</div>
                        <Child2></Child2>
                    </Child>
                    <Child name="张三" />
                    <Child name="李四" text="你好"/>
                    <Child name="王五" play="王者荣耀"/>
                    <Child name="马六"></Child>
                    {/* <Child text={this.state.msg} name={this.state.obj.name} arr={this.state.arr} /> */}
                </div>
            )
        }
    }
    class Child2 extends React.Component{
        render() {
            return(
                <div className="child2">child2</div>
            )
        }
    }
    ReactDOM.render(
        <Parent/>,
        document.getElementById('app')
    )
    </script>
</body>

三、使用react props封装button组件

 <div id="app"></div>
</body>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
<script type="text/babel">
class Parent extends React.Component{
  constructor(props){
    super(props)
    this.state={
      lists:["标题一","标题二","标题三"]
    }
  }
  render(){
    return(
      <React.Fragment>
        <div className="parent">这是爹
          <Child list={this.state.lists}></Child>
        </div>
      </React.Fragment>
    )
  }
}
class Child extends React.Component{
  render(){
    return(
      <div className="child">这是儿子
        {this.props.list}
        {this.props.list.map((item,index)=>
          <p >{item}</p>
        )}
      </div>
    )
  }
}
ReactDOM.render(
  <Parent></Parent>,
  document.getElementById("app")
)
</script>