react 学习日志1

1、react环境搭建

安装Node >= 8.10 和 npm >= 5.6

在终端输入：

npx create-react-app my-app
cd my-app  
npm start  // 运行my-app

2、react是什么？

React 是一个声明式，高效且灵活的用于构建用户界面的 JavaScript 库。使用 React 可以将一些简短、独立的代码片段组合成复杂的 UI 界面，这些代码片段被称作“组件”。

 

3、井字棋的棋盘

根据https://react.docschina.org/tutorial/tutorial.html替换my-app里面的index.css与index.js

class Square extends React.Component {
  render() {
    return (
      <button className="square">
        {/* TODO */}
      </button>
    );
  }
}

Square是一个React 组件类，一个组件接收一些参数，我们把这些参数叫做 props ，然后通过 render 方法返回需要展示在屏幕上的视图的层次结构 。更具体地来说，render 返回了一个 React 元素，这是一种对渲染内容的轻量级描述。大多数的 React 开发者使用了一种名为 “JSX” 的特殊语法，JSX 可以让你更轻松地书写这些结构。语法 <div /> 会被编译成 React.createElement('div')

 

1）props传值

在 React 应用中，数据通过 props 的传递，从父组件流向子组件

 

2）组件添加交互功能

为了少输入代码，同时为了避免 this 造成的困扰，我们在这里使用箭头函数 来进行事件处理

 

3）state实现‘记忆’

 

4）状态提升

当你遇到需要同时获取多个子组件数据，或者两个组件之间需要相互通讯的情况时，需要把子组件的 state 数据提升至其共同的父组件当中保存。之后父组件可以通过 props 将状态数据传递到子组件当中。这样应用当中所有组件的状态数据就能够更方便地同步共享了。

 

1. 向 DOM 内置元素 <button> 添加 onClick prop，让 React 开启对点击事件的监听。
2. 当 button 被点击时，React 会调用 Square 组件的 render() 方法中的 onClick 事件处理函数。
3. 事件处理函数触发了传入其中的 this.props.onClick() 方法。这个方法是由 Board 传递给 Square 的。
4. 由于 Board 把 onClick={() => this.handleClick(i)} 传递给了 Square，所以当 Square 中的事件处理函数触发时，其实就是触发的 Board 当中的 this.handleClick(i) 方法。

 

5）不可变性

一般来说，有两种改变数据的方式。第一种方式是直接修改变量的值，第二种方式是使用新的一份数据替换旧数据

 

简化复杂的功能：不直接在数据上修改可以让我们追溯并复用游戏的历史记录。

跟踪数据的改变：跟踪不可变数据的变化。如果发现对象变成了一个新对象即对象发生改变了。

确定在 React 中何时重新渲染

 

6）函数组件

 

7）key

当列表重新渲染时，根据每一项列表元素的 key 来检索上一次渲染时与每个 key 所匹配的列表项。如果 当前的列表有一个之前不存在的 key，那么就会创建出一个新的组件。如果 和之前对比少了一个 key，那么就会销毁之前对应的组件。如果一个组件的 key 发生了变化，这个组件会被销毁，然后使用新的 state 重新创建一份。

key 是 React 中一个特殊的保留属性（还有一个是 ref，拥有更高级的特性）。当 React 元素被创建出来的时候，React 会提取出 key 属性，然后把 key 直接存储在返回的元素上React 会通过 key 来自动判断哪些组件需要更新。组件是不能访问到它的 key 的。

我们强烈推荐，每次只要你构建动态列表的时候，都要指定一个合适的 key。

 

组件的 key 值并不需要在全局都保证唯一，只需要在当前的同一级元素之前保证唯一即可。

 

其他

 

1、在 React 中，有一个命名规范，通常会将代表事件的监听 prop 命名为 on[Event]，将处理事件的监听方法命名为 handle[Event] 这样的格式。