JSX

概念

JSX是JavaScript和XML（HTML）的缩写，表示在JS代码中编写HTML模版结构。它是React中编写UI模版的方式。
例如:

const message='this is message';
function App () {
	return (
	<div>
	  <h1>this is title</h1>
	  {message}
	</div>
	)
}

优势

HTML的声明式模版写法
JS的可编程能力

劣势

HTML与JS组合在一起阅读有些困难

本质

JSX并不是标准的JS语法，是JS的语法拓展,浏览器本身无法识别，通过解析工具后在浏览器中运行。

JSX中使用JS表达式

识别表达式

在JSX中可以通过大括号语法识别JavaScript中的表达式。

使用引号传递字符串
使用JavaScript变量
函数调用和方法调用
使用JavaScript对象

例如

const number = 1;
const getName = () => 'Xinon';
function App() {
    return (
        <div className="App">
        {/* 使用引号传入字符串 */}
        {'this is a message from js'}
        {/* 使用变量 */}
        {number}
        {/* 使用函数 */}
        {getName()}
        {/* 使用方法 */}
        { new Date().getDate() }
        {/* 使用js对象 */}
        { <div style={{color: 'red'}}>this is div</div> }
        </div>
    )
}

实现列表渲染

在JSX中使用原生JS中的map方法遍历渲染列表

map() 方法创建一个新数组，这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成。

例如

const lists = [
{id: 1, name: 'a'},
{id: 2, name: 'b'},
{id: 3, name: 'c'}
];

<ul>
  {list.map(item => (<li key={item.id}>{item.name}</li>))}
</ul>

注意

在渲染li标签的时候，React要求每个元素上面要绑定一个key值(独一无二)，可以是字符串也可以是数字。

作用

React框架内部使用提升更新性能

实现条件渲染

基础条件渲染

逻辑与运算符&&
三元表达式( ? : )

例如

1 2	{flag && <span>Only display when flag is true</span>} {loading? <span>loading...</span> : <span>Not loading</span>}

复杂条件渲染

如果出现多种条件的渲染应该怎么写呢？
这个时候就需要使用自定义函数+if判断语句

例如

function getType(type) {
    if (type === 1) return <div>1</div>
    else if (type === 2) return <div>2</div>
    else return <div>3</div>
}

...
{getType(2)}
...

事件绑定

语法

on + 事件名称 = {事件处理程序}，整体上遵循驼峰命名法

const handleClick = () => {
	console.log('hit');
}

...
<button onClick={handleClick}>click me</button>

使用事件对象参数

语法

在事件回调函数中设置形参e。

const handleClick = (e) => {
	console.log(e);
};
...
<button onClick={handleClick}>click me</button>

传递自定义参数

语法

事件绑定的位置改造为箭头函数的写法，在执行clickHandler的时候传递实参。

注意

！不能直接写函数调用，事件绑定需要一个函数引用

const handleClick = (name) => {
    console.log(name);
};
...
<button onClick={() => handleClick('xinon')}>click</button>}>

同时传递事件对象和自定义参数

语法

在事件绑定的位置传递事件实参e和自定义参数，clickHandler中声明形参，注意位置对应。

const handleClick = (e, name) => {
    console.log(e);
    console.log(name);
};
...
<button onClick={(e) => handleClick(e, 'xinon')}>click</button>}>

组件

概念

一个组件就是用户界面的一部分，它可以有自己的逻辑和外观，组件之间可以互相嵌套，也可以复用多次。

React组件

在React中，一个组件就是首字母大写的函数，内部存放了组件的逻辑和视图UI，渲染组件只需要把组件当做标签书写即可。

例如

// 1.定义组件
function Button() {
	return <button>click me</button>
}

// 2. 使用组件
function App() {
	return
		<div className="App">
			{/* 自闭合 */}
			<Button />
			{/* 成对标签 */}
			<Button></Button>
		</div>
}

样式处理

1. 行内样式(不推荐)

1	<div style={{color: 'red'}}>this is a div</div>

最外层的{}表示要使用JS表达式,内层的{}表示构造一个对象.

2. class类名控制

样式写在css内,文件头处导入css.

/* index.css */
.foo {
	color: red;
}

/* App.js */
import './index.css'
...
<span className="foo">this is a span</div>
...

注意原来的class要写作className。

useState(重要)

基础使用

useState是一个React Hook(函数)，它允许我们向组件添加一个状态变量，从而控制影响组件的渲染结果。

文件头使用import { useState } from 'react'导入函数.

本质

和普通JS变量不用的是，状态变量一旦发生变化，组件的视图UI也会跟着变化(数据驱动视图)

状态变量改变之后React知道这个状态变了就会重新更新渲染. 如果只是js的let变量改变了,React框架并不知道是否更新,也就不会同步渲染.

语法

const [count, setCount] = useState(0);

useState是一个函数,返回值是一个数组
数组中的第一个参数是状态变量,第二个参数是set函数用来修改状态变量
useState的参数作为count的初始值

例如

// 修改变量
const [count, setCount] = useState(0);
const handleClick = () => {
    //直接修改不会更新
    // ++count;
    // 调用setCount，每次都是替换count的值
    setCount(count + 1);
};

// 修改对象
const [form, setForm] = useState({name: 'xinon'});
const handleClick = () => {
    setForm({
        ...form,   //展开form里的所有元素
        name: 'xinonria'  //替换里面的name
    })
}

修改状态规则

状态不可变

在React中,状态被认为是只读的,我们应该始终替换它而不是修改它,直接修改状态不能引发视图更新.

不能直接用=来设置状态变量的值,这样子不会更新渲染!
修改状态用对应的set函数

react-1

JSX

概念

优势

劣势

本质