react基础--JSX、条件渲染、事件处理

React 是一个用于构建用户界面的 JavaScript 库。

React 几个特点

1. 声明式编码

   div.style.background = 'yellowgreen'
   setColor('yellowgreen')
   

2. 组件化编码

   • 将一个较大较复杂的界面拆分成几个可复用的部分封装成多个组件， 再组合使用

   • 组件可以被反复使用

3. 引入了 JSX 语法，编写高效

4. 内置 diff 算法，运行高效

5. 一次学习，随处编写

   • 不仅可以开发 web 应用（react-dom），还可以开发原生安卓或 IOS 应用（react-native）

React基本使用

1. 引入两个JS文件（ 注意引入顺序 ）  

<!-- react库, 提供React对象 -->
<script src="../js/react.development.js"></script>
<!-- react-dom库, 提供了ReactDOM对象 -->
<script src="../js/react-dom.development.js"></script> 

2. 在html定义一个根容器标签

<div id="root"></div> 

3. 创建react元素(类似html元素)

// 返回值：React元素 
// 参数1：要创建的React元素名称 =》字符串
// 参数2：元素的属性  =》对象 {id: 'box'} 或者 null
// 后面参数：该React元素的所有子节点 =》文本或者其他react元素
const element = React.createElement(
  'h1', 
  {title: '你好, React!'}, 
  'Hello React!'
) 

4. 渲染 react 元素

 // 渲染React元素到页面容器div中
ReactDOM.render(element, document.getElementById('root'))

特殊属性：class ==> className

const element = React.createElement(
  'h1', 
  {
    title: '你好, React!',
    className: 'active'
  }, 
  'Hello React!'
)

const title = '北京疫情'
const content = '北京这段时间疫情还在持续中...'

const vDom = React.createElement('div', null, 
  React.createElement('h2', {title}, '你关注的北京疫情'),
  React.createElement('p', null, content)
)
ReactDOM.render(vDom, document.getElementById('root2'))

理解 React 元素

1. 也称虚拟 DOM (virtual DOM) 或虚拟节点(virtual Node)

2. 它就是一个普通的 JS 对象, 它不是真实 DOM 元素对象

   虚拟 DOM: 属性比较少 ==> 较轻的对象

   真实 DOM: 属性特别多 ==> 较重的对象

3. 但它有一些自己的特点

   虚拟 DOM 可以转换为对应的真实 DOM => ReactDOM.render方法将虚拟DOM转换为真实DOM再插入页面

   虚拟 DOM 对象包含了对应的真实 DOM 的关键信息属性

   属性	示例
   标签名	type: "h1"
   标签属性	props: {title: '你好, React!'}
   子节点	props: {children: 'Hello React!'}

JSX

基本理解和使用

问题: React.createElement() 写起来太复杂了

解决: 推荐使用更加简洁的JSX

JSX 是一种 JS 的扩展语法, 用来快速创建 React 元素(虚拟DOM/虚拟节点)

形式上像 HTML 标签/任意其它标签, 且标签内部是可以套 JS 代码的

浏览器并不认识 JSX 所以需要引入babel将 JSX 编译成 React.createElement 的形式

<!-- 必须引入编译jsx的babel库 -->
<script src="../js/babel.min.js"></script>

<!-- 必须声明type为text/babel, 告诉babel对内部的代码进行jsx的编译 -->
<script type="text/babel">
	// 创建React元素 (也称为虚拟DOM 或 虚拟节点)
	const vDom = <h1 title="你好, React2!" className="active">Hello React2!</h1>
    // 渲染React元素到页面容器div中
    ReactDOM.render(vDom, document.getElementById('root'))
</script>

注意:

必须有结束标签；整个只能有一个根标签；空标签可以自闭合

JSX 中使用 JS 表达式

 JSX 中使用 JS 表达式的语法：{}

作用: 指定动态的属性值和标签文本

1. 可以是任意基本类型数据值, 但 null、undefined 和布尔值没有任何显示

2. 子元素可以是一个 JS 数组, 但不能是 JS 对象

3. style 属性值必须是一个包含样式的 JS 对象

4. 可以是 JS 的表达式, 不能是 JS 的语句

5. 可以是 react 元素对象

let title = 'I Like You'
const vNode = (
  <div>
    <h3 name={title}>{title.toUpperCase()}</h3>
    <h3>{3}</h3>
    <h3>{null}</h3>
    <h3>{undefined}</h3>
    <h3>{true}</h3>
    <h3>{'true'}</h3>
    <h3>{React.createElement('div', null, 'atguigu')}</h3>
    <h3>{[1, 'abc', 3]}</h3>
    <h3 title={title} id="name" className="ative" style={{color: 'red'}}></h3>
    {/* <h3>{{a: 1}}</h3> */} 
  </div>
)

样式处理

行内样式

• 样式属性名使用小驼峰命名法

• 如果样式是数值，可以省略单位

<h2 style={{color: 'red', fontSize: 30}}>React style</h2>

类名

• 必须用 className, 不能用 class

• 推荐, 效率更高些

<h2 className="title">React class</h2>

条件渲染

if...else

let vDom
if (isLoading) {
  vDom = <h2>正在加载中...</h2>
} else {
  vDom = <div>加载完成啦!</div>
}
 ReactDOM.render(vDom, document.getElementById('root'))

三元表达式

const vDom = isLoading ? <h2>正在加载中2...</h2> : <div>加载完成啦2!</div>
ReactDOM.render(vDom, document.getElementById('root'))

&&

const vDom = isLoading && <h2>正在加载中3...</h2>
ReactDOM.render(vDom, document.getElementById('root'))
// 注意: 只适用于只在一种情况下才有界面的情况

表达式1 && 表达式2

如果表达式1对应的boolean为true, 返回表达式2的值

如果表达式1对应的boolean为false, 返回表达式1的值

表达式1 || 表达式1

如果表达式1对应的boolean为true, 返回表达式1的值

如果表达式1对应的boolean为false, 返回表达式2的值

列表渲染

• react中可以将数组中的元素依次渲染到页面上

• 可以直接往数组中存储react元素

• 推荐使用数组的 map 方法

• 注意：必须给列表项添加唯一的 key 属性, 推荐使用id作为key, 尽量不要用index作为key

需求: 根据下面的数组显示列表

const courses = [ {id: 1, name: 'React'}, {id: 3, name: 'Vue'}, {id: 5, name: '小程序'} ]

const courses = [
  {id: 1, name: 'React'},
  {id: 3, name: 'Vue'},
  {id: 5, name: '小程序'}
]

const vDom = (
  <div>
    <h2>前端框架课程列表</h2>  
    <ul>
      {courses.map(c => <li key={c.id}>{c.name}</li>)}  
    </ul>
  </div>
)

ReactDOM.render(vDom, document.getElementById('root'))

事件处理

绑定事件

React 元素的事件处理和 DOM 元素的很相似，但是有一点语法上的不同：

• React 事件的命名采用小驼峰式（camelCase），而不是纯小写。比如：onClick、onFocus 、onMouseEnter

• 使用 JSX 语法时你需要传入一个函数作为事件处理函数，而不是一个字符串

      const div = <div onClick={事件处理函数}></div>

 

事件对象

React 根据 W3C 规范来自定义的合成事件, 与原生事件不完全相同

• 处理好了浏览器的兼容性问题

• 阻止事件默认行不能使用 return false, 必须要调用: event.preventDefault()

• 有自己特有的属性, 比如: nativeEvent -- 原生事件对象

• <input>的 change 监听在输入过程中触发， 而原生是在失去焦点才触发

  • 原理：内部绑定的是原生 input 事件

function handleClick1(event) {
  console.log(event)
  alert(event.target.innerHTML)
}

const handleClick2 = (event) => {
  const isOdd = Date.now()%2===1
  alert(isOdd)
  if (!isOdd) {
    // return false // 不起作用
    event.preventDefault()
  }
}

const vDom = <div>
    <button onClick={handleClick1}>点击提示按钮文本</button>
    <br/>
    <br/>
    <a href="http://www.baidu.com" onClick={handleClick2}>奇数才去百度</a>
  </div>

ReactDOM.render(vDom, document.getElementById('root'))

事件回调this的指向问题

React事件回调中的this是指向undefined

要想将this指向实例对象解决办法：

（1）箭头函数，

（2）bind绑定 this <this.pre = this.pre.bind(this)>