React基础

React如此强大的原因之一就在于它推行声明式编程范式

---

1.

理解该问题的简方式是：命令式编程描述代码如何工作，而

声明式编程则表明想要实现什 么目的。

与命令式世界极其相似的一个真实示例就是去酒吧喝啤酒并对服务员做出以下指示：

   从架子上拿一个玻璃杯；

    将杯子放到酒桶前； 

    按下酒桶开关，将杯子倒满；  

    把杯子递给我。

但在声明式世界中，你只需要说：“请给我一杯啤酒。”

按声明式方式点一杯啤酒，需要假设服务员知道如何提供啤酒，这是声明式编程工作原理的 一个重要方面。

2.

React 遵循声明式范式，因此

无须告诉它如何与 DOM 交互。你只要声明希望 在屏幕上看到的内容，

React就会完成剩下的工作

3.

开发 React的工程师一直在社区中推广另一个概念：

将样式的逻辑也放到组件中。

这 个概念颇具争议，而且很难被接受。

基础

---

4.常见误解

一种常见的观点认为，React是一个庞大的技术和工具集，要想使用它，就必须与包管理器、 转译器、模块打包器以及无数的库打交道。 

但 React其实是一个很小的库。像之前使用 jQuery或 Backbone 那样，我们可以在任何页面（甚至 JSFiddle）中使用它：只要在关闭主体元素前引入脚本即可。 

实际需要引入两个脚本，因为 React拆分成了两个包：核心包 react 实现了 React库的核心 特性，react-dom 则包含了与浏览器相关的所有特性。这样做的理由是，核心包可以用于支持 不同的目标平台，如浏览器中的 React DOM以及移动设备上的 React Native。

开发过程需要什么，引入相应的什么包  或 库 或 管理器

5.react基础原则

5.1 react界面完全由数据驱动

5.2 react中一切都是组件

5.3 props是react组件间通讯的基本方式

6.组件的地位

组件为react里的一等公民，公民们用props交流，当跨越多级聊天，全局变量？危害极大

业界往往采用第三方数据管理工具-----Redux与Mobx等

但react也提供了自己的跨组件通讯方式------Context

7.react组件用法

React 提供了两种方式来声明组件，一种是函数式，一种是类式。 

函数式很简单，就像我们平常写函数一样，接受一个参数作为输入，然后进行相应的输出，只不过它输出的jsx.

// welcome 函数式组件。

function Welcome(props) {

         return <h1> {props.name}</h1>

}

---

类式，则是利用es6 class 语法, 我们所有的组件都继承自React.Component.

classWelcomeextendsReact.Component{

   render() {

         return  <h1> {this.props.name}</h1>  }

}

---

声明组件以后，怎么使用这个组件？ 如果组件还要接受参数，怎样进行参数传递？ 把组件想成一个html标签就可以了，html标签怎么使用，组件就怎么使用。html标签有两种使用方式，一种是 img 自闭合标签<img />，一种是 h1之类的双标签<h1></h1>。同理，组件也有这两种使用方式。传参则像是给html标签写属性,属性名 = 属性值，如name =”Jason” , 组件内部的props 则把这些属性组合在一起形成对象｛name: “jason”｝

<Welcome name="Jason" /> // 标签一定要闭合，就是后面的/不能忘记

<Welcome></Welcome>

　　使用组件，它返回了 <h1> Jason</h1>, 很像html 代码，其实它是 React 所说的虚拟DOM,  并不是真实的DOM, 我们要把虚拟DOM 渲染成真实的DOM，才能显示到页面中，这需要用到ReactDOM的render 方法，它接受的第一个参数，就是虚拟DOM， 第二个参数就是我们要把DOM 渲染到什么地方。

ReactDOM.render(

    <Welcome name="Jason" />,

    document.getElementById('root')

);

8.属性-pros用法

Props是属性。属性不可以修改，也就是属性不可以由组件进行修改，组件的属性是由父组件传递过来的，相当于组件在出生的时候就存在的。

为什么要用pros?

我的理解就是从外部传入一个值，这个值可以是字符串，数组，对象等，然后根据组件的功能来使用这个值或者显示这个值，这是自定义组件内部做的事情。简单来说，就是通过pros传递值，然后去使用它。但是这个值不能被修改。

9.状态-state的使用

使用this.state来引用，状态指的是事物所处的状况。 

由事物自行处理、不断变化的。它是事物的私有属性。状态是可以改变的。 

为什么要用状态？ 

在组件本身维护了一个私有的状态，当状态发生改变时，能及时更新状态，及时渲染改变后的页面。

状态只和组件本身相关，组件不能修改属性。 

组件在运行时需要修改的数据就是状态。

简单来说就是： 

组件在运行时需要修改的数据就是状态。 

属性的核心要点就是不能修改！