React学习笔记1

一、为什么使用react？

1、react的特点

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

以下属于个人理解

单向数据流

在React中，数据的流向是单向的--从父节点传递到子节点，因为组件是简单而且易于把握的，他们只需从父节点获取props渲染即可，如果顶层组件的某个props
值改变了，react会递归的向下遍历整棵组件数，重新渲染所有使用这个属性的组件。

声明式设计

//声明式设计
const element1 = React.creatElement(
    'div',
    {className:"greeting"},
    '哈哈'
)

//过程式
element2 = document.createElement 'div'
element2.className = 'greeting'
element2.innerHTML = '哈哈'

//类似于这样一种简化的结构
const element = {
    type:'h1',
    props:{
        className:'greeting',
        children:'Hello Word'
    }
};
ReactDOM.render(
    element1,
    document.getElementById('root')
);

组件

两大特性：1、封装 2、重用

React优势

1、虚拟DOM用于性能的提升
2、组件化，实现代码的重用

react的三个js核心库

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<!--react的与dom相关的一些功能-->
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<!--将浏览器不支持的jsx语法转化为js语法-->
<script src="https://unpkg.com/[email protected]/babel.min.js"></script>

示例

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8" />
        <title>Hello World</title>
        <!--react的核心库-->
        <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
        <!--react的与dom相关的一些功能-->
        <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
        <!--将浏览器不支持的jsx语法转化为js语法-->
        <script src="https://unpkg.com/[email protected]/babel.min.js"></script>
    </head>

    <body>
        <div id="root"></div>
        <!--    
            <script> 标签的 type 属性为 text/babel 。
            这是因为 React 独有的 JSX 语法，跟 JavaScript 不兼容。
            凡是使用 JSX 的地方，都要加上 type="text/babel" 。
        -->
        <script type="text/babel">
            // ReactDOM.render 是 React 的最基本方法，用于将模板转为 HTML 语言，并插入指定的 DOM 节点。
            ReactDOM.render(
            <h1>Hello, world!</h1>, 
            document.getElementById('root') );
        </script>
    </body>

</html>

开发环境

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

生产环境

<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>

相比开发环境进行了压缩和优化

JSX语法

1、语法特点

1.一个很像XML的js语法扩展
2.编写模板更加快速-简单
3.它是类型安全的，在编译的过程中就能发现错误

2、使用规则

1.可以创建一个独立的js文件来使用，通过script标签来引入
2.使用多个标签，需用div来包裹
3.支持表达式，js表达式可以直接解析
4.不支持if else 但是可以使用三元表达式
5.直接解析数组
6.标签中注释需使用{}包裹，区别于原先的js注释，否则的话，会被解析成文本
7.推荐使用内联样式，直接进行样式的绑定

3、为什么使用JSX语法
jsx语法允许html和js混写，使页面数据和样式的操作变得更加简单
遇到html标签（以<开头），就用HTML规则解析
遇到以{开头的结构，就用js规则解析

4、注意事项
React时间使用驼峰命名，而不是全部小写
通过JSX，你传递一个函数作为事件处理程序，而不是一个字符串
模板部分不能有多个根节点
在使用jsx语法的时候，要关注到js的关键字和保留字的问题
使用class属性的时候需要使用className