React

🌸 您好，欢迎您的阅读，等君久矣，愿与君畅谈.
🔭 § 始于颜值 § 陷于才华 § 忠于人品 §
📫 希望我们可以进一步交流，共同学习，共同探索未知的技术世界 稀土掘金 OR GitHub.

---

# React 选择 JSX

1. jsx 是嵌入到 JavaScript 中的一种结构语法

2. jsx 顶层只能有一个根元素，通常在 jsx 的外层包裹着一个小括号 ()

3. 如果是单标签必须以 </> 结尾，否则报错

4. 注释的方式： {/*我是注释*/}

5. {} 中是否显示

   1. 直接显示： number 、 string 、 array

   2. 不显示内容为空： null 、 undefined 、 Boolean

      附加：若想让其显示的措施为：布尔类型直接使用 tostring 方法，另外两个使用 totring 包裹或者添加一个空字符串

   3. ** 对象类型 ** 不能作为 jsx 的子类，不能直接放在 {} 中显示

   4. {} 嵌入表达式：运算表达式、三元运算符、执行一个函数

6. 绑定属性

   1. 绑定普通属性
   2. 绑定 class 属性: className 、 htmlFor
   3. 绑定 style 属性: style={{}}

7. 绑定事件

   1. 关于 this

      {/*方式1.1：bind绑定this(显示绑定)*/}
      <button onClick={this.add.bind(this)}>按钮</button>
      {/*方式1.2：在constructor中统一绑定事件*/}
      constructor(props){
        super(props);
        this.state = {
         message:""
      	}
         this.add = this.add.bind(this);
      }
      ...
      <button onClick={this.add}>按钮</button>
      ...
      {/*方式2：定义函数时，使用箭头函数，箭头函数中永远不绑定this，会向上即最近作用域寻找当前对象*/}
      ...
      <button onClick={this.add}>按钮</button>
      ...
      add = ()=>{
        console.log(this.state.counter);
      }
      {/*方式3(推荐)：直接传入一个箭头函数，在箭头函数中调用需要执行的函数*/}
      <button onClick={()=>{this.add()}}>按钮</button>

   2. 传递参数

      class App extends React.Component{
        constructor(props){
          super(props);
          this.state = {
            movies:["天下无敌","奇门遁甲","十面埋伏","您好，李焕英"]
          }
          this.liClick = this.liClick.bind(this);
        }
        render(){
          return (
            <div>
              <button onClick={this.liClick}>按钮</button>
              <ul>
                {
                  this.state.movies.map((item,index,arr)=>{
                    return <li onClick={(event)=>{this.liClick(item,index,event)}}>{item}</li>
                  })
                }
              </ul>
            </div>
          )
        }
        liClick(item,index,event){
          console.log("点击按钮",item,index);
        }
      }
      ReactDOM.render(<App/>,document.getElementById("app"));

8. 条件渲染

   class App extends React.Component{
     constructor(props){
       super(props);
       this.state = {
         isLogin:true
       }
     }
     render(){
       const {isLogin} = this.state
       let welcome = null;
       let btnText = null;
       if (isLogin) {
         welcome = <h2>欢迎回来</h2>
         btnText = "退出"
       } else {
         welcome = <h2>请先登录</h2>
         btnText = "登录"
       }
       return (
         <div>
           {welcome}
           <button onClick={event=>{this.loginClick()}}>{isLogin?"退出":"登录"}</button>
           <hr/>  
           <h2>{isLogin?"GXX":null}</h2>
           {isLogin&&<h2>GXX</h2>}
         </div>
       )
     }
     loginClick(){
       this.setState({
         isLogin: !this.state.isLogin
       })
     }
   }
   ReactDOM.render(<App/>,document.getElementById("app"));

9. 列表渲染

   class App extends React.Component{
     constructor(props){
       super(props);
       this.state = {
         names:["cba","nba","abc","aaa"],
         nums:["12","44","66","33","88"]
       }
     }
     render(){
       const { names,nums } = this.state;
       return (
         <div>
           <h2>列表渲染1</h2>
           <ul>
             {
               names.map((item,index,arr)=>{
                 return <li>{item}</li>
               })
             }
           </ul>
           <h2>数字列表渲染2(过滤)</h2>
           <ul>
             {
               nums.filter((item)=>{
                 return item>=30;
               }).map((item)=>{
                 return <li>{item}</li>
               })
             }
           </ul>
           <h2>数字列表渲染3(截取)</h2>
           <ul>
             {
               nums.slice(0,3).map((item)=>{
                 return <li>{item}</li>  
               })
             }
           </ul>
         </div>
       )
     }
   }
   ReactDOM.render(<App/>,document.getElementById("app"));

10. jsx 的本质

    1. jsx 是 React.createElement(component,props,...children) 函数的语法糖，将会转换成 React.createElement() 函数调用
    2. React.createElement() 需要三个参数 ( 源码讲解 )
       1. 参数一：type
          1. 当前 ReactElement 的类型
          2. 标签元素，字符串表示 "div"
          3. 组件元素，组件名称
       2. 参数二：config
          1. 所有的 jsx 属性都在 config 中以对象的属性和值的形式存储
       3. 参数三：children
          1. 存放在标签中的内容，以 children 数组的方式进行存储
       4. 遍历 React.createElement函数中的参数
          

11. 过程

    1. jsx->通过React.createElement函数->创建ReactElement(对象)->组成JavaScript的对象树(虚拟DOM)->通过ReactDOM.render函数->映射成浏览器中的真实DOM
    2. jsx->通过React.createElement函数->创建ReactElement(对象)->组成JavaScript的对象树(虚拟DOM)->通过ReactDOM.render函数->原生的控件(UIButton/Button)

12. 为什么使用虚拟 DOM

    1. 很难跟踪状态发生的改变
    2. 操作真实 DOM 性能较低
       1. 创建出来的对象较复杂
       2. DOM 操作会引起浏览器的回流和重绘，因此在开发中避免频繁 DOM 操作

13. 虚拟 DOM

    1. 由命令式转换为声明式编程
    2. UI 以虚拟的方式保存在内存中，并且是 JavaScript 对象
    3. 可以使用 ReactDOM.render() 让虚拟 DOM 和真实 DOM 同步起来，这个过程叫作协调