一. JSX的使用

• jsx绑定属性
• • 比如元素都会有title属性

• • 当我们的光标放在titile属性上, 会出现一段小东西

    
    image.png
• • 绑定class比较特殊，因为class在js中是一个关键字，所以jsx中不允许直接写class => 使用className替代

//服务器给我们的是一张很大的图片, img元素大小, 加载一张非常大的图片会有性能问题, 只需要渲染一张小图片, 跟上一些参数大小, 搞一个工具
//jsx非常灵活, JS的东西基本上都可以使用, 如果用的是Vue的语法, 相对图片做一个改变, 用封装的某一个过滤器

//对象的解构语法
const { title, imgUrl } = this.state;

<div>
  {/* 1. 绑定普通属性 */}
  <h2 title={this.state.title}>我是标题</h2>
  <img src={this.state.imgUrl} alt=""/>  //单标签必须以/结尾 alt, 图片没有显示时的文本
  <a href={link} target="_blank">百度一下</a>

  {/* 2. 绑定class */}
  <div className="box title">我是div元素</div>
  <div className{"box title" + (active ? "active" : "")}>我也是div元素</div>

  {/* 3. 绑定style 属性由连接符组成要改成驼峰, 或者加单双引号"font-size" */}
  <div style={{color: "red", fontSize: "50px"}}>我是div,绑定style属性</div>

</div>

<div class=""></div>

真实开发网络请求.png 真实开发中统一处理图片大小.png image.png
image.png
效果.png

二. React事件绑定

三种方案

1. 显示绑定(bind绑定this) render函数中this.btnClick.bind(this) 开发中用到的非常少
   1.1 如果有5个按钮, 每次都需要传入? => 直接在构造器里面, 找到BtnClick, 重新做一个赋值this.btnClick = this.btnClick.bind(this);
2. 定义函数式, 使用箭头函数
   ES6中给对象增加属性, 箭头函数中永远不绑定this, 按照作用域一层层网上找
3. 直接传入一个箭头函数, 在肩头函数中调用要执行的函数
   <button onClick={() => { console.log(this.decrement() }}>-1</button>

<div>
  <button onClick={this.btnClick}>按钮</button>
</div>

btnClick() {
  console.log("按钮发生点击");

{/* 报错undefined this是undefined, 当前btnClick的函数并不是主动调用, React内部对函数做了一个回调, 传递的参数就是undefined */}
  console.log(this.state.message);
}

increment = () => {
 console.log(this.state.counter) ;
}

decrement(name) {
  console.log(this.state.counter, name);
}

this的undefined.png

三. jsx绑定事件-传递参数

• event对象, React调用时包装的对象
• 虚拟DOM, setState, DOM更新, 警告
• 代码太长了, 包一个(), 代码结构优化

<ul>
  this.state.movies.map((item, index, arr) => {
    return <li onClick={e => { this.liClick(item, index, e) }}>{item}</li>
})
</ul>

liClick() {
  console.log("li发生了点击", item, index);
}

React内部合成的对象.png 开发中常用的方案.png 代码结构优化.png

补充:

• 按钮发生点击React执行函数onClick.call(undefined, event)

• bind的优先级大于call

  
  调用过程1.png
  调用过程2.png

四. React条件渲染

• 根据某一些条件成立或者不成立, 来决定是否渲染某部分内容
• • 在vue中, 我们会通过指令来控制: 比如v-if、v-show;
• • 在React中, 所有的条件判断都和普通的JavaScript代码一致;
• 常见的条件渲染的方式有哪些?
• 方式一: 条件判断语句
• ES6中箭头函数的规律, 如果只有一个函数体, ()可以省略
• 方案二: 三目运算符
• 方案三: 逻辑与

this.state = {
  isLogin: true
}
//1. 通过if判断: 逻辑代码非常多的情况
let welcome = nil;
let btnText = nil
if (this.state.isLogin) {
  welcome = <h2>欢迎回来</h2>
  btnText = "退出";
} else {
    welcome = <h2>请先登录</h2>
    btnText = "登录";
}

return (
  <div>
    {welcome}
    <button onClick={e => this.loginClick()}>{this.state.isLogin ? "退出" : "登录"}</button>
     <h2> {isLogin ?  "你好啊, coderwhy"" : null}</h2>

    { /* 逻辑与: 一个条件不成立, 后面的条件都不会进行判断, 字符串由内容的情况下为真, 作为表达式的结果返回 */ }
     <h2>{ isLogin && "你好啊, Jack" }</h2>
      <h2>标签是否存在
      {isLogin && <h2> "你好啊, Jack" </h2>}
  </div>
)


loginClick() {
  this.setState({
  isLogin: !this.state.isLogin
  })
}

• 什么是DOM?
• • DOM 是 Document Object Model(文档对象模型)的缩写。下面是MDN对DOM的解释：
    文档对象模型 (DOM) 是HTML和XML文档的编程接口。它提供了对文档的结构化的表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构，样式和内容。
    DOM 将文档解析为一个由节点和对象（包含属性和方法的对象）组成的结构集合。简言之，它会将web页面和脚本或程序语言连接起来。
• <h2>不显示
• display的值不写死, 动态的

const titleDisplayValue = isLogin ? "block": "none";
<h2 style={{display: titleDisplayValue}}>你好啊</h2>

五. React列表渲染

• 真实开发中我们会从服务器请求到大量的数据, 数据会以列表的形式存储
• • 比如各种排行版列表的数据...
• 在React中并没有像Vue模块语法中的v-for指令, 而且需要我们通过JavaScript代码的方式组织数据, 转成JSX:
• 如何展示列表呢?
• • map高阶函数;

const nums = [110, 123, 50, 32, 55, 10];
const newNums = nums.filter((item, index, arr) => {
  return item >= 50;
})
console.log(newNums);

const newNums2 = nums.filter((item => {
  return item % 2 === 0;
}))
console.log(newNums2);

// 可读性
this.state.numbers.filter(item => item >= 50).map(item => <li>{item}</li>)

//截取
this.state.numbers.filter(item => item >= 50).slice(0, 3).map(item => {
  return <li>{item}</li>
})

列表渲染示例.png
截取.png

coderwhy的React核心技术与开发实战课程链接

少年~来做同学呀~.png