jsx

1. jsx(javascript XML),是js的语法扩展，在react中jsx不是必须的，而是react推荐使用的一种语法格式，使用jsx语法能是代码更加优雅，易于维护
2. jsx是什么？（在js中可以写html标签）
   • jsx是react的元素，声明的组件实例化，即为元素。例： 即为元素
   • jsx是一种变量(对象),在jsx结构中 要使用 {} 包裹
   • jsx可以无限嵌套
   • 在jsx中，class要写成className，for要写成htmlFor，tabindex要写成tabIndex
   • jsx可以防注入（XSS）攻击
   • jsx中可以使用任何的表达式
   • jsx中，React元素的属性值为变量也需要使用 {} 包裹
   • jsx中可以直接使用数组

React

1. npm install react -s react核心
2. npm i react-dom -s react-dom渲染dom
3. ReactDOM.render(, document.getElementById(‘app’)); 找到id为app的节点，渲染App组件

react组件

1. 两种定义组件的方法： class类组件、函数式组件（无状态组件）

   // class 类组件
   // 1.它有声明周期，state，this，ref，context等特性
   // 2.有一个必须的生命周期render
   // 3.相对于函数式组件，类组件性能(渲染速度)稍差
   class TestProps1 extends React.Component {
     constructor(props) {
       super(props)
       this.state = {
         count: 1,
       }
     }
     render () {
       return (
         <div>
           <h1>类组件</h1>
         </div>
       )
     }
   }
   

   // 函数式组件(无状态组件)
   // 1.它没有 生命周期，state，this，ref，context等特性
   // 2.这个函数式组件必须return，并且一定返回React元素
   // 3.相对于类组件，函数式组件的性能(渲染速度)较好
   function TestProps2 () {
     return (
       <div>
         <h1>无状态组件--1</h1>
       </div>
     )
   }
   

   props

   1. 在react中，props非常强大，它是父子组件之间的纽带
   2. props用于从父组件向子组件传值，传递的值可以是任意类型或react组件
   3. 在类组件中，props和state原则上不能相互赋值，可能会造成意外的报错

   父子组件通信

   1. 父组件向子组件传值，使用自定义属性

   2. 子组件向父组件传值，使用定义事件，在子组件内触发

   3. 自定义属性和自定义事件，子组件都是通过props接收

   4. 父组件接收子组件的参数

      // 父组件接收子组件lang参数
      onLangChange={ (lang) => this.langChange(lang) }
      // 子组件触发函数
      onLangChange(lang)
      

   事件绑定

   1. react中，所有的事件绑定都以on开头，使用驼峰命名

2. 类组件

      // 事件绑定
      // 使用ES5绑定事件处理函数改变this指向，事件对象，永远都是事件处理函数的最后一个参数
      onClick={this.click.bind(this)}
      // 事件声明
      click (event) {
          console.log(this)
          console.log(event)
          console.log('div click');
   }
   

   // 使用ES6改变this指向，事件对象要手动传入
      onClick={(event) => {this.handleClick2(event)}}
      
       handleClick2 (event) {
          console.log(this)
          console.log(event)
          console.log('handleClick2')
        }
   

3. 函数式组件,获取事件对象及传参

      function Child (props) {
        function handleClick (event,agr1) {
          console.log('handle click');
          console.log(event);
          console.log(agr1);
        }
        return (
          <div>
            {/* <button onClick={handleClick}>子组件 别点我</button> */}
            {/* 函数式组件传参 */}
            <button onClick={(event) => handleClick(event,100)}>子组件 别点我</button>
          </div>
        )
      }
   

   1. 在react中阻止事件冒泡：event.stopPropagation();

   2. 组视事件默认行为： event.preventDefault();

   3. 监听键盘事件:

      inputChange (event) {
          if (event.keyCode === 13) {
            console.log(event.target.value);
          }
        }