react-官方教程初步

发表于 | 分类于

前言

reactjs，本质上是用js写的一套框架。和jquery是同级别的东西。一般运行在浏览器里面。(ssr，应该是编译到后端吧，还不太确定)。react代表了Facebook公司的理念，短小精悍，可扩展性强。按照M V VM框架的理念进行设计。

官方教程初步

教程地址：https://doc.react-china.org/docs/hello-world.html

函数定义/类定义组件

组件分为以上俩种，前者代表了es5语法的时代，后者代表es6之后的时代写法。现在基本上都用es6.

状态更新可能是异步的

我们在使用React的时候 可以将通过setState()设置当前组件的state的值。但是setState()是一个异步函数。So this.props 和 this.state 可能是异步更新的，你不应该依靠它们的值来计算下一个状态。
这个问题可能没有经历过人很难理解。建议实践一下:
https://segmentfault.com/a/1190000008051628

事件处理

你必须谨慎对待 JSX 回调函数中的 this，类的方法默认是不会绑定 this 的。如果你忘记绑定 this.handleClick 并把它传入 onClick, 当你调用这个函数的时候 this 的值会是 undefined。

这并不是 React 的特殊行为；它是函数如何在 JavaScript 中运行的一部分。通常情况下，如果你没有在方法后面添加 () ，例如 onClick={this.handleClick}，你应该为这个方法绑定 this。

如果使用 bind 让你很烦，这里有两种方式可以解决。

  • 1、属性初始化器语法
  • 2、回调函数中使用 箭头函数

    总结，一般来说。使用第一种，因为第二种会增加外层函数，会有性能问题。

向事件处理程序传递参数

  • <button onClick={(e) => this.deleteRow(id, e)}>Delete Row //显示传递e
  • <button onClick={this.deleteRow.bind(this, id)}>Delete Row // 隐式传递e，e为最后一个参数

    总结，一般来说。使用第二种方式传递，还是性能优化问题。

大总结：需要传参数用bind，不需要传参数，用定义箭头函数

条件渲染

if else

1
2
3
4
5
if (isLoggedIn) {
     button = <LogoutButton onClick={this.handleLogoutClick} />;
   } else {
     button = <LoginButton onClick={this.handleLoginClick} />;
   }

与运算符 &&

1
2
3
4
5
{unreadMessages.length > 0 &&
  <h2>
    You have {unreadMessages.length} unread messages.
  </h2>
}

三目运算符

1
2
3
4
5
{isLoggedIn ? (
  <LogoutButton onClick={this.handleLogoutClick} />
) : (
  <LoginButton onClick={this.handleLoginClick} />
)}

阻止组件渲染

1
{this.state.showWarning ? 'Hide' : 'Show'}

列表 & Keys

Keys可以在DOM中的某些元素被增加或删除的时候帮助React识别哪些元素发生了变化。因此你应当给数组中的每一个元素赋予一个确定的标识。

( 具体到diff算法，因为diff在比较的时候，无法识别同一级别的同样元素的兄弟元素，只有通过key实现比较)
key会作为给React的提示，但不会传递给你的组件。如果您的组件中需要使用和key相同的值，请将其作为属性传递

表单

受控组件

什么是受控？
一个表单的值个state中的某一个属性值息息相关的时候。
1）这个表单元素的值，来自state。
2）更改表单元素的值，能够改变state中的值。
也叫作双向绑定，但是在React中称为受控组件（Controller Component），Vue中才叫双向数据绑定（Two-Way data binding）

1
2
单行文本框、多行文本框、range条的受控、下拉菜单
<input>,<textarea>, 和 <select>

上面的受控方式是完全一样：大体上的套路为：

1
value = {}，onChange = {()=>{}}
  • 也可以采用非受控组件的方式进行控制表单元素(属于高级部分，后面会总结)

状态提升

使用 react 经常会遇到几个组件需要共用状态数据的情况。
这种情况下，我们最好将这部分共享的状态提升至他们最近的父组件当中进行管理。

组件组合

组件之间多用组合，不用继承, 具体实现是通过属性和组合来进行扩展

前端构建理念

  • 第一步：把 UI 划分出组件层级
  • 第二步：用 React 创建一个静态版本 (state and propos)
  • 第三步：定义 UI 状态的最小(但完整)表示
  • 第四步：确定你的 State 应该位于哪里
  • 第五步：添加反向数据流

    希望这可以让你了解如何使用 React 构建组件和应用程序。
    虽然这可能会比以前编写更多的代码，

  • *但请记住，代码是用来读的，这比写更重要，**
    并且非常容易阅读这个模块化的，思路清晰的代码。
    当你开始构建大型组件库的时候，
    你会开始欣赏 React 的思路清晰化和模块性，
    并且随着代码的复用，你的代码量会开始减少。:) 深深表示赞同，代码是用来读的

结束

学习框架流程：
看官方教程写demo—>写实际项目—>继续看官方教程和原理—>看源码。