Web前端学习笔记——关于React

1. React：是一个声明式，高效且灵活的用于构建用户界面的 JavaScript 库。
2. 作用：可以将一些简短、独立的代码片段组合成复杂的 UI 界面即“组件”。
3. 特点：数据驱动视图原则
4. 创建react项目：
   在命令行下使用以下命令：

• create-react-app 项目文件夹名称
• 进入项目文件夹：cd 项目文件夹名称
• 开启服务：npm start
  注意：遇到“Please remove any global installs with one of the following commands”问题时，可通过npx uninstall -g create-react-app将create-react-app卸载，再利用npx install -g create-react-app重新安装。

5. 删除react项目：

• 在命令行下关闭服务：ctrl c
• 右键删除

6. react元素： 是不可变对象，一旦被创建，就无法更改它的子元素或者属性。
   可以为DOM标签：
   

也可以为用户自定义的组件：

props： React 把以小写字母开头的组件视为原生 DOM 标签。当 React 元素为用户自定义组件时，它会将 JSX 所接收的属性（attributes）以及子组件（children）转换为单个对象传递给组件，这个对象被称之为 “props”。

9. JSX（Javascript + Xml）：是一个对象，被称为虚拟DOM元素。
   例如下列视图中的element均为Jsx对象：
   
   
   
   

10. props的只读性： 组件无论是使用函数声明还是通过 class 声明，都决不能修改组件自身的 props。（一旦修改即违背其单向数据流的原则；将子组件的状态提升至父组件中时才可修改其子组件的props。）

11. state的使用：
    不可直接修改，应该使用 setState()；
    构造函数是唯一可以给 this.state 赋值的地方；
    state 为局部（封装）的原因：
    数据是向下流动的，不管是父组件或是子组件都无法知道某个组件是有状态的还是无状态的，并且它们也并不关心它是函数组件还是类组件。(除了拥有并设置了它的组件，其他组件都无法访问。)
    state 的更新可能是异步的：
    
    state 的更新会被合并：
    

12. 组件化创建方式：
    方式一：函数声明（函数式组件）
    函数名称的首字母必须大写；
    函数必须有返回值；
    props与组件的属性有关；
    通过props接收参数的值，无参时其默认值为null；
    
    方式二：类声明（ES6方式即类的继承）
    在类中必须使用render( )函数；
    render( )函数必须return一个jsx元素；
    React.Component为一个基类，使用类声明的组件必须继承这个类；
    
    render( )函数： 可将虚拟DOM渲染成真实DOM，用于确定在页面上的显示方式。
    ReactDOM.render(虚拟DOM元素，节点)： 用于确定所要渲染的HTML元素。
    所有 React 组件都必须像纯函数一样保护它们的 props 不被更改。在 React 应用中，组件是有状态组件还是无状态组件属于组件实现的细节，它可能会随着时间的推移而改变。
    组件可以接受任意props，包括基本数据类型，React元素以及函数。

13. 复用组件
    

14. 事件处理
    使用 React 时，一般不需要使用 addEventListener 为已创建的 DOM 元素添加监听器，只需要在该元素初始渲染的时候添加监听器即可；
    通常在定义一个组件的时候，将事件处理函数声明为 class 中的方法；
    
    

15. 钩子（hooks）
    定义
    状态钩：
    useState：返回当前状态值和一个用于更新它的函数，您可以从事件处理程序或其他地方调用此函数，唯一参数useState是初始状态参数，且其仅在第一次渲染期间使用。
    效果钩：
    useEffect：告诉 React 在完成对 DOM 的更改后运行你的“副作用”函数，由于副作用函数是在组件内声明的，所以它们可以访问到组件的 props 和 state。默认情况下，React 会在每次渲染后调用副作用函数 —— 包括第一次渲染的时候。
    Hook规则：
    
    Context ：共享对于一个组件树而言是“全局”的数据
    Hook 本质就是 JavaScript 函数

16. 高阶组件（HOC）
    定义：是参数为组件，返回值为新组件的函数；是 React 中用于复用组件逻辑的一种高级技巧；是一种基于 React 的组合特性而形成的设计模式。
    组件是将 props 转换为 UI，而高阶组件是将组件转换为另一个组件。