React第三次入门

传统HTML开发在处理越来越多的服务器数据和用户交互数据反应到复杂界面的时候，代码量越来越大，难以维护。 Angular是基于MVVM的开发框架，重量级。。不适用于移动端的web栈， 其UI组件的封装相对复杂，不利于重用。

React大致相当于View层，不是一个完整的MVC/MVVM框架， 和web components不冲突，数据单项绑定，组件化绑定

应用场景：

1.复杂场景下的高性能

2.重用组件库，组件组合

3.“懒”

／／你总是这样轻言放弃的话，无论多久都只会原地踏步

https://facebook.github.io/react/

JSX: JS 的一个语法糖， 需要解析库提前解析，才可以编译。

JSX可以直接在JS里写类DOM的结构

<div id="root">
    <!-- This element's contents will be replaced with your component. -->
</div>

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

const element = <Welcome name="Sara" />;
ReactDOM.render(
  element,
  document.getElementById('root')
);

其中的{} 表示要取｛｝中执行JS表达式的值，{}中的this表示当前的component实例，.props是在使用这个react components是，所有的属性集合(是个对象)

实例中是JS的运行环境，“class”是JS的保留字，如果需要设置类名，用className代替.

React的行内样式不是用字符串的形式表示的(style="color: red;"), 需要用样式对象来表示，样式对象的key值就是样式名的驼峰标示写法。（style={{color: 'red';}}）

1.You may use quotes to specify string literals as attributes:

const element = <div tabIndex="0"></div>;

2.You may also use curly braces to embed a JavaScript expression in an attribute:

const element = <img src = {user.url} />

JSX Prevents Injection Attacks

It is safe to embed user input in JSX:

const title = response.potentiallyMaliciousInput;
// This is safe:
const element = <h1>{title}</h1>;

By default, React DOM escapes any values embedded in JSX before rendering them. Thus it ensures that you can never inject anything that's not explicitly written in your application. Everything is converted to a string before being rendered. This helps prevent XSS (cross-site-scripting) attacks.

 

diff算法：

https://calendar.perfplanet.com/2013/diff/

 

 

关于ref属性：

接受一个callback函数，一旦component mounted或者unmounted，就会被执行。

如果是html元素上用ref属性的话，callback函数的参数是 该HTML元素的DOM节点；

如果是用在自己写的component上的话，callback函数返回的参数是 该component的实例