title: React一点点
author: Gamehu
tags:
  - react
categories:
  - 工作
date: 2018-08-18 11:45:00
---



{% asset_img  one_year_of_react_native.png %}



网上关于React的内容一抹多，我就不献丑了，我简单记录一下，主要是一些编程中不太注意的的点。





***React***

A JavaScript library for building user interfaces。React是MVC中作用于V的一种库，需要注意它不是一个框架只是一个库。

[reacts to state changes](https://www.quora.com/Why-is-React-called-React)，react是对页面状态变化做出反应的意思。



***Component***

Component  is A piece of the UI，React App is  Tree of component。组件的概念其实之前就有不过我是从React才开始了解的，即把一个前端应用拆分为一个个的组件。



***React*.*createElement*()**

没看到有用React但是为什么还需要import React？

{% asset_img 1.png https://youtu.be/Ke90Tje7VS0%}

因为是JSX到JS这样编译后是需要React.createElement来创建元素的，所以需要引入

```
// This JSX:
React.render(<div id="msg">Hello World!</div>, mountNode);

// Is transformed to this JS:
React.render(React.createElement("div", {id:"msg"}, "Hello World!"), mountNode);
```



***JSX***

JavaScript XML



***Why can't JSX write If-Else***

因为 JSX 只是函数调用和对象创建的语法糖，像一下的代码编译后是不合法的JS，没法识别。

```
 // This JSX:
<div id={if (condition) { 'msg' }}>Hello World!</div>

 // Is transformed to this JS:
React.createElement("div", {id: if (condition) { 'msg' }}, "Hello World!");
```



***Arrow Function***

为什么箭头函数可以提代bind(this)，首先是因为JS中的一个实验特性[Static class fields and private static methods](http://github.com/tc39/proposal-static-class-features/)，一个箭头函数没有它自己的 `this`，不过他使用的是封闭的执行上下文的 `this` 值。箭头函数在词法上绑定它们的上下文，所以 `this` 实际上指向最原始的上下文。

所以有个点我们需要明白，bind不是react要求的，而是因为JS的this对象的指向问题导致的。

bind(this)延伸阅读：[react-binding-patterns-5-approaches-for-handling-this](https://www.freecodecamp.org/news/react-binding-patterns-5-approaches-for-handling-this-92c651b5af56/)



***setState***

*它接受一个对象或者函数作为参数*，如果你想在 `setState` 之后使用新的 `state` 来做后续运算就需要使用到函数。

[state 和 setstate](http://huziketang.mangojuice.top/books/react/lesson10)：为什么不用直接用this.state.xxx=xxx;而必须用setState才能修改state，因为如果用this.state.xxx=xxx,React无法知道你修改了状态，所以需要调用setState通知到React你修改了状态，然后React会走它那一套更新状态的步奏。



***props vs state***

共同点：都可以决定组件的行为和显示形态。

[react-state-vs-props-explained](https://codeburst.io/react-state-vs-props-explained-51beebd73b21)：

state可以理解为函数的局部变量，所以外部是不能访问和修改的，只有内部能维护。

props它是组件间对话的方式，让外部（父组件）数据和行为传入组件（子组件）内部达到更新内部组件的目的。



***controlled vs uncontrolled***

简单的理解了一下，[受控组件](https://www.robinwieruch.de/react-controlled-components)这儿受控其实指的是通过props来控制data，非受控通常说的是自己内部维护data，大多数情况下我们都用的是受控组件

[What are controlled components and uncontrolled components?](https://stackoverflow.com/questions/42522515/what-are-controlled-components-and-uncontrolled-components)





***lifecycle hooks***

{% asset_img 1.png https://youtu.be/Ke90Tje7VS0%}

## 延伸阅读：

{% blockquote proposal-class-public-fields https://tc39.es/proposal-class-public-fields/ %}
{% endblockquote %}

{% blockquote github tc39 https://github.com/tc39/proposal-class-public-fields %}
{% endblockquote %}

{% blockquote github Demystifying Memory Usage using ES6 React Classes https://medium.com/dailyjs/demystifying-memory-usage-using-es6-react-classes-d9d904bc4557 %}
{% endblockquote %}



{% blockquote understanding-reactjs-setstate https://medium.com/@baphemot/understanding-reactjs-setstate-a4640451865b %}
{% endblockquote %}