react基本语法

react属于前端三大主流框架之一
快速入门示例

 <script type="text/babel">
   // 接收 2 个参数：JSX（视图的描述）、绑定的根元素
   ReactDOM.render(<h1>Hello.react</h1>,document.getElementById('app'));
 </script>

通过上面示例发现react是通过createElement来创建的虚拟DOM，jsx来描述的视图
react组件
在react中组件分为函数组件与类组件
函数组件简单示例

<script type="text/babel">
  function Test(){
    return (
      <h1>Hello</h1>
    )
  }

ReactDOM.render(<Test />, document.getElementById('app'));
</script>

类组件简单示例

<script type="text/babel">
  class Test extends React.Component{
    render(){
      return (
        <p>this is a test</p>
      )
    }
  }

ReactDOM.render(<Test />, document.getElementById('app'));
</script>

两者最明显的不同就是在语法上，函数组件是一个纯函数，它接收一个props对象返回一个react元素。而类组件需要去继承React.Component并且创建render函数返回react元素，这将会要更多的代码，虽然它们实现的效果相同。
既然是组件，那么我们就可以组件之间进行嵌套。代码如下：

<script type="text/babel">
  class HelloReact extends React.Component {
    render() {
      return <h1>hello React</h1>
    }
  }

class HelloJSX extends React.Component {
  render() {
    return <h1>hello JSX</h1>
  }
}

class Welcome extends React.Component {
  render() {
    return (
      <div>
      <HelloReact />
      <HelloJSX />
      </div>
    )
  }
}
ReactDOM.render(<Welcome/>, document.getElementById("app"));
</script>

react组件之间的传值
父组件向子组件传值跟vue一样都是用props

<script type="text/babel">
  class HelloReact extends React.Component {
    constructor(props){
      super(props)
    }
    render() {
      return (
        <div>
              <h1>hello React</h1>
              <p>{this.props.name}</p>
              <p>{this.props.gender}</p>
              </div>
      )
		}
}

function HelloJSX(props){
  return (
    <div>
    <h1>hello JSX</h1>
    <p>{props.name}</p>
<p>{props.gender}</p>
</div>
)
}


class Welcome extends React.Component {
  render() {
    return (
      <div>
      <HelloReact name="F71" gender="female"/>
      <HelloJSX name="F72" gender="male"/>
      </div>
    )
  }
}
ReactDOM.render(<Welcome/>, document.getElementById("app"));
</script>

插槽

<script type="text/babel">
        class Welcome extends React.Component {
            render() {
                return (
                    <div>
                       <p>这是 welcome 组件</p>
                       {this.props.children}
                    </div>
                )
            }
        }
       ReactDOM.render(<Welcome>this is a test</Welcome>, document.getElementById("app"));
 </script>

事件的处理
如何绑定事件？(事件的绑定就是用onClick)

代码如下：

<script type="text/babel">
     
        function Welcome(){

            function eventHandle(){
                console.log('函数组件绑定事件');
            }

            return (
                <p onClick={eventHandle}>this is a test</p>
            )
        }

        ReactDOM.render(<Welcome>this is a test</Welcome>, document.getElementById("app"));
      </script>

改变this指向的方法

1. 箭头函数（箭头函数与普通函数this的指向是不一样的）
2. 在 constructor 中通过 bind 来绑定 this 的指向
   代码如下

class Welcome extends React.Component {
            constructor(){
                super();
                this.eventHandle = this.eventHandle.bind(this)
            }
            eventHandle(){
                // 我们在组件的事件处理函数上面，期望 this 是指向当前这个组件
                console.log(this);
            }
            render() {
                return (
                    <div>
                       <p onClick={this.eventHandle}>这是 welcome 组件</p>
                       {this.props.children}
                    </div>
                )
            }
        }
        ReactDOM.render(<Welcome>this is a test</Welcome>, document.getElementById("app"));

3. 在绑定事件的时候，通过箭头函数
   代码如下

class Welcome extends React.Component {
            eventHandle(){
                // 我们在组件的事件处理函数上面，期望 this 是指向当前这个组件
                console.log(this);
            }
            render() {
                return (
                    <div>
                       <p onClick={()=>this.eventHandle()}>这是 welcome 组件</p>
                       {this.props.children}
                    </div>
                )
            }
        }
        ReactDOM.render(<Welcome>this is a test</Welcome>, document.getElementById("app"));