react alert显示此网页在_React这么好用，你还不会吗(下篇)

之前写了一篇关于React的文章-《React这么好用，你还不会吗》，是关于React基础概念使用的，内容包括JSX语法、组件&元素、生命周期以及相关使用，这篇文章继续介绍React，包含事件处理、条件渲染、列表、表单等相关内容，帮助大家一起认识一下React的相关概念，毕竟前端领域React也是领军语言，如果你用Vue，那么学一点React也无妨，一起学习吧

1 事件处理

• React 事件的命名采用小驼峰式(camelCase)，而不是纯小写

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


    {isToggleOn ? 'ON' : 'OFF'}




渲染一个让用户切换开关状态的按钮：

完整代码如下：

function App() {
  const [isToggleOn, setIsToggleOn] = useState(false);

  function handleClick() {
    setIsToggleOn(!isToggleOn);
  }

  return (
    


        {isToggleOn ? 'ON' : 'OFF'}


  );
}


2 条件渲染

在React中，可以使用 if 或者条件运算符 ?:来选择性地表现组件当前的状态，然后让React根据条件来更新UI.

举个栗子：定义一个 Hello 组件，根据传入姓名进行渲染，如果有名字，那么返回 Hello, [name]，否则返回 Hello, stranger。效果如下：

代码如下：

Hello.tsx文件

import React from 'react';
interface IProps {
    name?: string
}

function Hello(props:IProps) {
    if (props.name) {
        return 

hello, {props.name}


    } else {
        return 

Hello, Stranger


    }
}

export default Hello;


App.tsx文件

'lucy'/>




3 列表 & key

在 JavaScript 中，使用 map() 函数可以对数组中的每个项进行操作，获取一个新的列表，比如对数组中的数字进行翻倍处理：

const numbers = [2,3,6,8,9]; 
const doubled = numbers.map(item => item * 2); 
console.log(doubled)

代码输出[4, 6, 12, 16, 18]

同样地，在 React 中，也可以把数组转化为 DOM 元素 我们可以将一个姓名数组渲染成一个姓名列表：

代码如下：

import React from 'react';

interface IProps{
    names: Array
}function NameList({names}:IProps){if (names)return 


            {names.map(name => {name})}else {return 

Empty


    }
}export default NameList;

代码可以正常运行，页面显示正常，但是打开控制台会发现一个警告 Warning: Each child in a list should have a unique "key" prop.

这是因为 React 规定每个列表项都必须包括一个特殊的 key 属性，key 属性帮助 React 识别哪些元素发生了改变，一个元素的 key 最好是这个元素在列表中拥有的一个独一无二的字符串，通常会使用数据的 id 来作为元素的 key

function NameList({names}:IProps){
    if (names)
        return 


            {names.map(item => {item.name})}
    else {
        return 

Empty


    }
}


列表项的 key 有以下几点需要注意：

1.元素的 key 只有放在就近的数组上下文中才有意义

比如说用列表渲染多个 li 元素，如果 li 元素被封装了起来，封装到了 ListItem 组件中，那么 key 就应该被放在 元素上，而不是放在 ListItem 组件中的 元素上。

2.兄弟节点之间的 key 是唯一的

key 并不需要全局唯一，只需要在兄弟节点之间是唯一的即可。

4.表单

表单控件分为受控组件和非受控组件。

HTML中的表单元素通常自己维护 state，根据用户输入进行更新，而在React中，可变状态通常保存在组件的 state 属性中，并且只能通过使用 setState() 来更新。将两者结合起来，使 React 成为「唯一数据源」，渲染表单的 React 组件控制着用户输入过程中表单发生的操作，被 React 以这种方式控制取值的表单输入元素就叫做受控组件。

举个栗子：

结果如下：

组件代码：

import React from 'react';
import {useState} from 'react';

function FormItem() {
    const [value, setValue] = useState('');

    function handleChange(e:any){
        setValue(e.target.value)
    }

    function handleSubmit(e:any){
        alert(`提交者：${value}`);
        e.preventDefault();
    }

    return (
    <>
        
                姓名：type="text" value={value} onChange={handleChange} />type="submit" value="提交" />
    >
    )
}

export default FormItem;

由于在表单元素上设置了 value 属性，因此显示的值始终为 state 中的 value， React的state成为唯一数据源。由于 handleChange在每次按键使都会执行更新 React 的 state，因此显示的值随着用户输入而更新。

对于受控组件来说，输入的值始终由React的state驱动。

在 React 中，input、textarea、select之类的标签都非常相似，它们都接受一个 value属性，可以使用它来实现受控组件。

input 中的 file类型，因为其 value 只读，所以它是 React中的一个非受控组件。

当需要处理多个 input元素时，可以给每个元素添加name属性，并让处理函数根据e.target.name的值选择要执行的操作。

后记

本文介绍了 React 中的核心概念：事件处理、条件渲染、列表、表单处理，通过React核心概念入门|上篇^[1]以及本文的介绍，基本就能够了解到 React中的常见概念。

TypeScript能够通过类型注解提供编译时的静态类型检查，是JavaScript的超集，越来越多的公司倾向于使用 TypeScript编程，本文也是在 React 中使用了 TypeScript的编程方式进行编写的，紧跟时代潮流。

感谢阅读，文章如有疏漏，欢迎不吝赐教。

参考资料

[1]

React这么好用，你还不会吗: https://mp.weixin.qq.com/s?__biz=MzU5OTgxNTMxMA==&mid=2247483818&idx=1&sn=d958dfbe25ae3cd333798ccb731d0690&chksm=feae644bc9d9ed5db4f9e0c03620428fe0c3e2bc4e1f9f3a34315f570d978062961817f92d02&token=441363318&lang=zh_CN#rd