这是我参与「第四届青训营」笔记创作活动的第3天。

什么是React

认识react框架

了解react框架之前，先了解下什么是框架：在互联网编程中，框架指的是一种抽象的形式但却具备通用的功能。

react框架是一个用来构建用户界面的一个JavaScript库，主要是用来构建UI的，开发人员在这个库中可以在里面进行传输多种类型的数据，还可以帮助开发者选择页面和传递动态变量，还是一个可以交互的应用组件。

React框架特点

1.声明式设计 −React采用声明范式，可以轻松描述应用。
2.高效 −React通过对DOM的模拟，最大限度地减少与DOM的交互。
3.灵活 −React可以与已知的库或框架很好地配合。
4.JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但我们建议使用它。
5.组件 − 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。
6.单向响应的数据流 − React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。

转换式系统

可以抽象的理解成：给定输入求解输出

就比如代码中定义了a=b+c ,当我改变b或者c的值的时候，给出输出的a都要随之改变一下

响应式系统

所谓响应 顾名思义就是我给你一个请求，你给我一个答复的这样一个过程，通过对事件的监听来选择要进行的操作

监控系统就好比生活中的烟雾报警器，它监控的是是否有烟雾，当检测到烟雾的时候就要发出警报。这个烟雾就相当于烟雾报警器所监听的事件，而“报警”这一动作则相当于响应。

人做事也像是一个响应式系统，在烧水的时候我们不会一直等到水开才会去做下一件事，而是在烧水的时候可以去做很多事，当水烧开了的时候给我们一个提示，这个时候我们响应到水开了。

graph TD
事件 --> 执行既定的回调  --> 状态变更

组件

react组件.png

组件化.png

就比如这个页面，可以将整个页面划分出不同的组件，且父组件可以控制子组件

状态归属问题

当前价格这一状态应该属于哪一组件？如果把这个状态给顶栏是可以的，给内容一栏也没啥问题，其实它应该是属于Root组建的，当两个组件共享一个状态时，这个状态应该上移。

也就是状态应该归属为两个节点向上寻找到最近的祖宗结点。

状态局部性问题

就比如颜色这一状态，把它放在颜色组件中是很合理的，因为其他组件并不会影响到颜色组件中的颜色状态，这一状态就是局部的，它不会被其他的组件所共享。

组件实例

function HelloMessage(props) { 
    return <h1>Hello World!</h1>; 
} 
const element = <HelloMessage />; 

ReactDOM.render( 
    element, 
    document.getElementById('example') 
);

这里封装了一个名称为HelloMessage的组件，可以输出“Hello World!”

使用函数定义组件

function HelloMessage(props) {
    return <h1>Hello World!</h1>;
}

也可以使用ES6 class来定义一个组件

class Welcome extends React.Component {
  render() {
    return <h1>Hello World!</h1>;
  }
}

React事件处理

React 元素的事件处理和 DOM 元素类似。但是有一点语法上的不同:

React 事件绑定属性的命名采用驼峰式写法，而不是小写。
如果采用 JSX 的语法你需要传入一个函数作为事件处理函数，而不是一个字符串(DOM 元素的写法)

HTML 通常写法是：

<button onclick="activateLasers()">
  激活按钮
</button>

React 中写法为：

<button onClick={activateLasers}>
  激活按钮
</button>

在 React 中另一个不同是你不能使用返回 false 的方式阻止默认行为，你必须明确使用 preventDefault。

例如，通常我们在 HTML 中阻止链接默认打开一个新页面，可以这样写：

<a href="#" onclick="console.log('点击链接'); return false">
  点我
</a>

在 React 的写法为：

function ActionLink() { 
    function handleClick(e) { 
        e.preventDefault(); 
        console.log('链接被点击'); 
    } return ( 
    <a href="#" onClick={handleClick}> 
        点我 
    </a> 
  ); 
}

实例中 e 是一个合成事件。

使用 React 的时候通常你不需要使用 addEventListener 为一个已创建的 DOM 元素添加监听器。你仅仅需要在这个元素初始渲染的时候提供一个监听器。

小结

React框架知识点很多，先记下这些，后序随着学习的深入继续补充。

React入门 | 青训营笔记