React一点点

发表于 更新于 分类于

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

React

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

reacts to state changes，react是对页面状态变化做出反应的意思。

Component

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

React.createElement()

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

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

1
2
3
4
5
// 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，没法识别。

1
2
3
4
5
 // 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，一个箭头函数没有它自己的 this，不过他使用的是封闭的执行上下文的 this 值。箭头函数在词法上绑定它们的上下文，所以 this 实际上指向最原始的上下文。

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

bind(this)延伸阅读：react-binding-patterns-5-approaches-for-handling-this

setState

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

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

props vs state

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

react-state-vs-props-explained：

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

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

controlled vs uncontrolled

简单的理解了一下，受控组件这儿受控其实指的是通过props来控制data，非受控通常说的是自己内部维护data，大多数情况下我们都用的是受控组件

What are controlled components and uncontrolled components?

lifecycle hooks

延伸阅读：