React 学习笔记（二）

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

React 事件的命名采用小驼峰式（camelCase），而不是纯小写

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

一、事件处理

1.事件绑定

React 元素的事件处理和 DOM 元素类似，但是在语法上有些区别，比如：

传统的 html：用双引号包裹，后面必须跟参数

<button onclick="myfun()">点击</button>

React：用大括号包裹，后面不跟参数

<button onclick={myfun}>点击</button>

一个完整的事件函数代码如下

class Demo extends React.Component {
    render() {

        // 事件函数
        function myfun() {
            alert('helo,world')
        }

        return (
            // 绑定事件
            <button onClick={this.myfun}>
                Activate Lasers
            </button>
        )
    }
}

ReactDOM.render(
    <Demo />,
    document.getElementById('root')
)

如果方法后面没有()，则需要为这个方法绑定 this

2.阻止默认行为

在 React 中还有一个不同的点，不能通过返回 fasle 阻止默认行为，React 提供了一个属性－－preventDefault，可以通过 preventDefault 阻止脚本执行

看一下传统的 html 和 React 的对比

<a href="#" onclick="alert('是否弹窗？');return false">
    Click me
</a>

直接在写上 false 就可以阻止脚本执行

React 通过 preventDefault 属性阻止脚本执行：

function ActionLink() {
  function handleClick(e) {
    e.preventDefault();
    console.log('The link was clicked.');
  }

  return (
    <a href="#" onClick={handleClick}>
      Click me
    </a>
  );
}

二、条件渲染

在 React 中，可以创建不同的组件来封装各种你需要的行为，然后，根据应用不同的状态，你可以只渲染对应状态下的部分内容。

React 中的条件渲染和 javascript 中的一样，使用 if 运算符来表示元素当前的状态，然后让 React 根据他们来更新 UI。

使用 if..else 语句进行条件渲染

先写一个条件渲染的例子，定义了两个组件，然后通过判断组件 Greeting 中的变量 isLoggedIn 的真伪，让浏览器渲染组件 UserGreeting 或者 GuestGreeting。

// App.js
import React, { Component } from 'react'

export default class App extends Component {
  render() {
    function UserGreeting(props) {
      return <h3>Welcome back!</h3>;
    }

    function GuestGreeting(props) {
      return <h3>Please sign up.</h3>;
    }

    function Greeting(props) {
      const isLoggedIn = props.isLoggedIn;
      if (isLoggedIn) {
        return <UserGreeting />;
      }   
      return <GuestGreeting />;
    }

    return (
      <div>
        <Greeting isLoggedIn={false} />
      </div>
    )
  }
}

最后变量 isLoggedIn 定义了 false，因此，浏览器渲染 `GuestGreeting。

怎么阻止条件渲染？

在有些情况下，我们希望能隐藏组件，即使他已经被其他组件渲染。我们可以通过 render 方法返回 null 让组件不渲染。

下面的示例中，会根据 prop 中 warn 的值来进行条件渲染。如果 warn 的值是 false，那么组件则不会渲染：

function WarningBanner(props) {
  if (!props.warn) {
    return null;
  }

  return (
    <div className="warning">
      Warning!
    </div>
  );
}

class Page extends React.Component {
  constructor(props) {
    super(props);
    this.state = {showWarning: true};
    this.handleToggleClick = this.handleToggleClick.bind(this);
  }

  handleToggleClick() {
    this.setState(state => ({
      showWarning: !state.showWarning
    }));
  }

  render() {
    return (
      <div>
        <WarningBanner warn={this.state.showWarning} />
        <button onClick={this.handleToggleClick}>
          {this.state.showWarning ? 'Hide' : 'Show'}
        </button>
      </div>
    );
  }
}

ReactDOM.render(
  <Page />,
  document.getElementById('root')
);

三、渲染列表

先看一段代码，我们使用 map() 函数让数组中的每一项变双倍，然后得到一个新的数组 doubled 并打印出来。

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map((number) => number * 2);
console.log(doubled);

// [2,4,6,8,10]

而在 React 中，把数组转换为元素列表的过程是相似的。

先通过 map() 方法遍历 numbers 数组，将数组中的每个元素变成 <li> 标签，最后将得到的数组赋值给 listItems 。

然后返回 {listItem} 。

// Map.js
const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
  <li>{number}</li>
);

ReactDOM.render(
  <ul>{listItems}</ul>,
  document.getElementById('root')
);

运行之后浏览器出现 1-5 的无序列表

1.分离组件

上面就是一个基本的列表渲染的例子，但是数据写死了。接下来我们将数组重构成一个组件，以后再进行数组渲染时，可以轻松调用。

// Map.js
export default class Map extends Component {
  render() {

  // 分离出组件 NumberList 作为转换数组的组件
    function NumberList(props) {
      const numbers = props.numbers;
      const listItems = numbers.map((number) =>
        <li>{number}</li>
      );
      return (
        <ul>{listItems}</ul>
      );
    }

    // 传入需要的数据
    const numbers = [1, 2, 3, 4, 5, 6, 7];

    return (
      <div>
        <NumberList numbers={numbers} />
      </div>
    )
  }
}

2.key

运行代码之后，页面会正常显示，但是控制台会报一个错误。Each child in a list should have a unique "key" prop.，意思是当你创建一个元素时，必须包括一个特殊的 key 属性。

现在给每个列表元素分配一个 key：

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    <li key={number.toString()}>
      {number}
    </li>
  );
  return (
    <ul>{listItems}</ul>
  );
}

const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
  <NumberList numbers={numbers} />,
  document.getElementById('root')
);

3.使用 id 作为 key

key 帮助 React 识别了哪些元素被改变，比如删除和添加，所以应当给每个元素确定一个标识，也就是 key。

一个元素的 key 最好是这个元素在列表中拥有的一个独一无二的字符串。通常，我们使用数据中的 id 来作为元素的 key：

// Map.js
export default class Map extends Component {
  render() {

    function NumberList(props) {
      const numbers = props.numbers;
      const listItems = numbers.map((number) =>
        <li key={number.id}>  // 赋值 key
          {number.text}
        </li>
      );
      return (
        <ul>{listItems}</ul>
      );
    }

    // 传入数据
    const numbers = [
      {id: 1,text: 1},
      {id: 2,text: 2},
      {id: 3,text: 3},
      {id: 4,text: 4},
      {id: 5,text: 5}
    ];

    return (
      <Fragment>
        <NumberList numbers={numbers} />
      </Fragment>
    )
  }
}

4.索引 index 可以作为 key 吗？

当元素没有确定 id 的时候，万不得已你可以使用元素索引 index 作为 key：

const todoItems = todos.map((todo, index) =>
  // 仅仅当没有确定 id 的时候使用索引 index 作为 key
  <li key={index}>
    {todo.text}
  </li>
);

如果列表项目的顺序可能会变化，我们不建议使用索引来用作 key 值，因为这样做会导致性能变差，还可能引起组件状态的问题。

5.用 key 提取组件

比方说，如果你提取出一个 ListItem 组件，你应该把 key 保留在数组中的这个 <ListItem /> 元素上，而不是放在 ListItem 组件中的 <li> 元素上。

错误的使用方法：

function ListItem(props) {
  const value = props.value;
  return (
    // 错误！你不需要在这里指定 key：
    <li key={value.toString()}>
      {value}
    </li>
  );
}

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    // 错误！元素的 key 应该在这里指定：
    <ListItem value={number} />
  );
  return (
    <ul>
      {listItems}
    </ul>
  );
}

const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
  <NumberList numbers={numbers} />,
  document.getElementById('root')
);

正确的使用方法：

function ListItem(props) {
  // 正确！这里不需要指定 key：
  return <li>{props.value}</li>;
}

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    // 正确！key 应该在数组的上下文中被指定
    <ListItem key={number.toString()}              value={number} />

  );
  return (
    <ul>
      {listItems}
    </ul>
  );
}

const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
  <NumberList numbers={numbers} />,
  document.getElementById('root')
);

React：一个好的经验法则是：在 map( ) 方法中的元素需要设置 key 属性。

6.key 只是在兄弟节点之间必须唯一

数组元素中使用的 key 在其兄弟节点之间应该是独一无二的。然而，它们不需要是全局唯一的。当我们生成两个不同的数组时，我们可以使用相同的 key 值：

function Blog(props) {
  const sidebar = (
    <ul>
      {props.posts.map((post) =>
        <li key={post.id}>
          {post.title}
        </li>
      )}
    </ul>
  );
  const content = props.posts.map((post) =>
    <div key={post.id}>
      <h3>{post.title}</h3>
      <p>{post.content}</p>
    </div>
  );
  return (
    <div>
      {sidebar}
      <hr />
      {content}
    </div>
  );
}

const posts = [
  {id: 1, title: 'Hello World', content: 'Welcome to learning React!'},
  {id: 2, title: 'Installation', content: 'You can install React from npm.'}
];
ReactDOM.render(
  <Blog posts={posts} />,
  document.getElementById('root')
);

7.vue 中渲染列表

Vue 中渲染列表使用的是特殊指令 v-for，其中也有 key 的相关用法

React 中采用的是 map() 方法遍历数组，然后渲染列表

title: React 学习笔记（二） date: 2020-12-16 13:15:00 updated: 2021-11-09 15:19:31 categories:

技术 tags:
react