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" , //Stringage: 20 , //Numbernames:["axigg" , "abc"],//Array

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

                    text1:null,//nulltext2:undefined,//undefiedtest3: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}// 初始化的时候就绑定thisthis.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>