react(1)一、基本语法在react中，若添加class或for属性需class->className；for->h

一、基本语法

<body>
  <div id="app"></div>

  <!-- browser.js 用来编译JSX语法的  -->
  <script src="./browser.min.js"></script>
  <!-- react.js react的核心库 用来管理组件和状态的 -->
  <script src="./react.development.js"></script>
  <!-- react-dom.js 渲染组件的 依赖react.js 必须在react.js后面引入！！！ -->
  <script src="./react-dom.development.js"></script>

  <script type="text/babel">
    // 第一个参数： 需要插入html内容
    // 第二个参数： 挂载元素

    ReactDOM.render(<h1>Hello World</h1>,document.getElementById('app'))

  </script>
</body>

在react中，若添加class或for属性需 class -> className ；for -> htmlFor
单标签必须闭合
必须要有一个唯一的父元素
使用{} 来表示表达式（在vue中用{{}}表示）
若在标签内为标签添加样式，则第一个{ }为表达式，第二个{ }为对象

        <p style={{
          color: '#ff0036',
          fontSize: '20px'  ---------------------->驼峰式
        }}>   </p>

定义组件时，组件名称首字母必须大写
在引用组件的时候可以给通过给组件定义属性的方式传参
age = "xxx" 只能传一个string类型的参数
age = { } 可以传任何类型的数据

二、组件

函数组件（无状态组件，通过函数定义组件）
通过props来接收引用组件时传递的所有的参数 props本身是一个数组

    function Com(props) {
      return (
        <div>
          hello world
          {name}
          <p>年龄：{ props.age }</p>             ------->字符串类型
          <p>年龄：{ props.age1 } </p>            ------->数字类型
          <p>身高：{ props.info.height } </p>
          <p>体重：{ props.info.weight } </p>
        </div>
      )
    }
    
    ReactDOM.render(<Com age="18" age1={ 18 } info={ {
      height: '180cm',
      weight: '70kg'
     } } />,document.getElementById('app'))

class组件（有状态组件，通过类定义组件）
组件中通过this.props来获取引用组件时传递的所有参数 props是一个数组

    class Com extends React.Component {
      constructor(params) {
        super(params)
      }

      render() {
        return (
          <div>
            hello world  
            <p>姓名：{this.props.name} </p>
            <p>年龄：{this.props.age} </p>
            <p>{this.props.arr}</p>
          </div>
        )
      }
    }

    ReactDOM.render(<Com name="zs" age={18} arr={[1,2,3]}/>, document.getElementById('app'))

若在调用组件时，在组件开始与结束标签之间有内容，则通过this.props.children来获取

 class Com extends React.Component {
      constructor(params) {
        super(params)
      }

      render() {
        return (
          <div>
            {this.props.children}
          </div>
        )
      }
    }

    ReactDOM.render(<Com/>
        <div> hello </div>
    <Com>, document.getElementById('app'))

三、组件之间的互相传值

组件的引用(父元素调用子元素方法)
通过给组件或元素增加一个ref属性来引用对应的组件或元素且ref的值不允许重复（ref的值一旦重复了后面的就会把前面的覆盖）
在父级中通过refs属性来获取当前组件内的所有引用

----------------------------------------父组件------------------------------------
    class Parent extends React.Component{
      constructor(params) {
        super(params)

        this.addFun = this.addFun.bind(this)------>定义方法时要通过bind改变this指向
      }

      addFun() {
        let child = this.refs.child1
        child.add(this.refs.myInput.value)---------------->直接调用子组件里的方法
      }

      render() {
        return (
          <div>
            <h1>父组件</h1>
            <input type="text" ref="myInput" />
            <button onClick={this.addFun}>点击后子组件count+n</button>
            <Child ref="child1"/>
          </div>
        )
      }
    }

----------------------------------------子组件------------------------------------

    class Child extends React.Component{
      constructor(params) {
        super(params)

        this.state = {
          count: 0
        }

        this.add = this.add.bind(this)
      }

      add(num) {
        this.setState({
          count: this.state.count + num * 1--------->input框中的内容是string类型 通过*1改为num类型
        })
      }

      render() {
        return (
          <div>
            <h1>子组件</h1>  
            <p> count: {this.state.count} </p>
            <button onClick = {this.add}> 点击count+n </button>
          </div>
        )
      }
    }

    ReactDOM.render(<Parent />, document.getElementById('app'))

组件通信（子组件调用父组件中的方法）
通过定义属性传值 this.props接收值

----------------------------------------父组件------------------------------------
    class Parent extends React.Component{
      constructor(params) {
        super(params)

        this.state = {
          count: 0
        }

        this.addFun = this.addFun.bind(this)
      }

      addFun() {
        this.setState({
          count: this.state.count + 1
        })
      }

      render() {
        return (
          <div>
            <h1>父组件</h1>  
            <p> count: { this.state.count }</p>
            <Child parent = {this}  addffff = {this.addFun} />
          </div>
        )
      }
    }

    class Child extends React.Component {
      constructor(params) {
        super(params)
        
        this.add = this.add.bind(this)
      }

      add() {
        let { parent } = this.props  ---------->将this.props下的parent属性解构出来
        // parent.addFun()---------->第一种方法 接收this 调用this下的方法

        this.props.addffff()---------->第二种方法 接收this.addFun 直接调用
      }

      render() {
        return (
          <div>
            <h1>子组件</h1> 
            <button onClick={this.add}>点击父组件count+1</button> 
          </div>
        )
      }
    }

    ReactDOM.render(<Parent/>, document.getElementById('app'))

四、事件绑定、条件渲染（if）、列表渲染（map）

事件绑定时事件名称需使用小驼峰式 onclick => onClick onblur => onBlur
在组件的自定义事件中，必须要通过bind来改变this指向
通过setState的方法来修改state里的属性
props接收的属性是只读的不可以修改
阻止浏览器的默认行为需要调用event下的preventDefault方法，event.preventDefault()
使用map方法进行遍历时，遍历出的每一项需要增加一个key属性且key的值必须是唯一的
map方法中若返回值只有一项则可简写

     <ul>
      {
        list.map((obj, index) => (
          <li key={index}>{obj.name}:{obj.age}</li>
        ))
      }
    </ul>