React---day2

2、jsx核心语法

2.1 class

和java很像啊

   <script>
        // 定义一个对象
        class Person {
            //构造函数
            constructor(name , age){
                this.name = name;
                this.age = age;
            }
            // 定义一个方法
            sayHello(){
                console.log(`hello ${this.name}`);
            }
        }
        // 创建一个对象
        Person1 = new Person('张三' , 18);
        // 调用对象的方法
        Person1.sayHello();
        // 继承：提高代码复用性
        class Student extends Person{
            // 构造函数
            constructor(name , age , score){
                // 调用父类的构造函数
                super(name , age);
                this.score = score;
            }
            // 重写父类的方法
            sayHello(){
                // 调用父类的方法
                super.sayHello();
                console.log(`我的分数是${this.score}`);
            }
        }
        // 创建一个对象
        Student1 = new Student('李四' , 20 , 100);
        // 调用对象的方法
        Student1.sayHello();
    </script>

2.2 嵌入数据

2.2.1 嵌入变量

在{}中可以正常显示的内容：

                    name:"jyx" , //String
                    age: 20 , //Number
                    names:["axigg" , "abc"],//Array

在{}中不能正常显示的内容(忽略)

                    text1:null,//null
                    text2:undefined,//undefied
                    test3:false,//boolean

为什么???就是避免出现undefied显示在页面上的情况

2.2.2 嵌入表达式

              <h2>{firstname + lastname}</h2>
              <h2>{5 * 3}</h2>
              <h2>{isLogin ? "成功登录" : "登录失败"}</h2>
              <h2>{this.getFullName()}</h2>

2.3 绑定

2.3.1 绑定属性

主要就是两个class和style

 {/*绑定class , className*/}
              <div className="title">我是className</div>
              {/*绑定style , 小驼峰*/}
              <div style={{
                    color: "red",
                    fontSize: "20px",
                    backgroundColor: "yellow",
                    padding: "10px"
                }
              }>绑定style</div>

2.3.2 绑定事件

绑定事件就是onClick，但是一定要注意this的执行

 <script type="text/babel">
        class App extends React.Component {
            constructor() {
                super()
                this.state = {
                    message:"我是h2",
                    num:0
                }
                // 初始化的时候就绑定this
                this.increaseNum = this.increaseNum.bind(this)
            }
            render() {
                return (
                    <div>
                        <h2 onClick={this.btnClick.bind(this)}>点击我</h2>
                        <h3 onClick={this.increaseNum}>加1</h3>
                        <h2 onClick={this.showNum}>展示数字</h2>
                    </div>
                )
            }
            btnClick() {
                console.log(this.state.message)
            }
            increaseNum() {
                console.log(this.state.num + 1)
            }
            showNum =  () => {
                console.log(this.state.num)
            }
        }
        ReactDOM.render(<App />, document.getElementById('app'))
    </script>

​ 在btnClick中打印this，结果是undefined

​ 这是因为btnClick方法没有被绑定到组件实例上,btnClick方法在被调用时，this指向了全局对象而不是组件实例,this默认为undefined。

• 解决方法1：在构造函数中使用this.btnClick = this.btnClick.bind(this) --- 显式绑定，不常见
• 解决方法2： 给btn函数在初始化的时候就绑定this
• 解决方法3：使用箭头函数，箭头函数不会创建自己的this，它会捕获上下文中的this值

2.4 渲染

2.4.1 条件渲染

• 在JSX中可以使用三元运算符来进行条件渲染。

例如：{isLogin ?

欢迎回来

:

请先登录

}

• 也可以使用逻辑与运算符（&&）来简化条件渲染。

  例如：{isLogin &&

  你好啊，蒋乙菥

  }

• v-show是通过设置元素的style属性来控制显示和隐藏，而v-if是通过条件判断来决定是否渲染该元素。

   <h4 style={{ display: isLogin ? "block" : "none" }}>
                  欢迎公主回家
                </h4>

2.4.2 列表渲染

• 使用map高阶函数

     <ul>
                              <h2>数组展示</h2>
                              {
                                  this.state.foods.map((item , index , arr) => {
                                      return (
                                          <li key={index}>
                                              {item}
                                          </li>
                                      )
                                  })
                              }
                          </ul>

• filter:进行过滤

   <ul>
                              <h2>数组筛选</h2>
                              {
                                  this.state.num.filter((item , index , arr) => {
                                      if( item % 2 === 0) {
                                          return true
                                      } else {
                                          return false
                                      }
                                  }).map((item , index , arr)=> {
                                      return (
                                          <li key={index}>
                                              {item}
                                          </li>
                                      )
                                  })
                              }
                          </ul>

• slice:进行截取

      <ul>
                              <h2>数组截取</h2>
                              {
                                  this.state.foods.slice(0,3).map((item , index , arr) => {
                                      return (
                                          <li>
                                              {item}
                                          </li>
                                      )
                                  })
                              }
                          </ul>