对于React你必须要知道的基础知识

基础

React是什么

用于构建用户界面的 JavaScript 库

声明式编程

React 使创建交互式 UI 变得轻而易举。为你应用的每一个状态设计简洁的视图，当数据改变时 React 能有效地更新并正确地渲染组件。
告诉计算机我们要什么 ---结果

声明式编程的好处

以声明式编写 UI，可以让你的代码更加可靠，且方便调试。

如何使用React

下载

可以通过 CDN 获得 React 和 ReactDOM 的 UMD 版本。

<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>

上述版本仅用于开发环境，不适合用于生产环境。压缩优化后可用于生产的 React 版本可通过如下方式引用：

<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>

React.development.js

• React.development.js 提供 React.development.js 核心功能代码，如：虚拟 dom，组件
  • React.createElement(type,props,children);

let h1 = React.createElement(
			"h1",
			null,
			"这里是h1标签的子级，可以是标签，也可以是内容，不写就是空标签"
		 );

react-dom.production.js

• ReactDOM 提供了与浏览器交互的 DOM 功能，如：dom 渲染
  • ReactDOM.render(element, container, callback)
    • element：要渲染的内容
    • container：要渲染的内容存放容器
    • callback：渲染后的回调函数

        ReactDOM.render(
            "这是第一个参数的内容",
            document.querySelector("#app"),
            ()=>{
                console.log("渲染成功")
            }
        );

为什么要使用 crossorigin 属性?

如果你通过 CDN 的方式引入 React，建议使用crossorigin
同时建议你验证使用的 CDN 是否设置了 Access-Control-Allow-Origin: * HTTP 请求头
这样能在 React 16 及以上的版本中有更好的错误处理体验。

babel

babel-standalone.js：在浏览器中处理 JSX
下载地址：https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js
引入完成后要在script中加入type属性

<script type="text/babel">
	...
</script>

使用JSX优化创建视图

插值表达式

        let str = "这是str，应该是用来演示插值表达式的！！！"
		ReactDOM.render(
            <header>
                <h1>{str}</h1>
                <p>这是用JSX来渲染的</p>
            </header>,
            document.querySelector("#app"),
            ()=>{
                console.log("渲染成功")
            }
        );

浏览器反馈

• 各种数据的插值状态(备注：插值只能执行表达式，不能执行语句)
  • number——正常输出
  • true / false——不输出
  • undefined——不输出
  • null——不输出
  • 数组——去掉逗号后渲染在页面
  • 对象——需要调用属性名，不然会报错

条件输出

因为我们插值不支持语句，所以在做条件输出时只能支持一下三种方式

1. 三目运算符——类似于if…else
2. 逻辑或 || ——类似于取反的 if()
3. 逻辑与 && ——类似于正常的 if()

        ReactDOM.render(
            <header>
                <h1>{true ? "成立" : "不成立"}</h1>
                <p>{false || '这是用JSX来渲染的'}</p>
                <div>{true && "正确"}</div>
            </header>,
            document.querySelector("#app"),
            ()=>{
                console.log("渲染成功")
            }
        );

列表输出

列表输出分为两种方式

1. 提出ReactDOM里的element并写成函数

        let data = [
            "内容1",
            "内容2",
            "内容3",
            "内容4"
        ]

        function toData(){
            let arr = [];
            data.forEach(item=>{
                arr.push(<li>{item}</li>)
            });
            return arr;
        }

        ReactDOM.render(
            <header>
                {toData()}
            </header>,
            document.querySelector("#app"),
            ()=>{
                console.log("渲染成功")
            }
        );

2. 使用map方法

		let data = [
            "内容1",
            "内容2",
            "内容3",
            "内容4"
        ]
        ReactDOM.render(
            <ul>
                {
                    data.map(item=>{
                        return <li>{item}</li>
                    })
                }
            </ul>,
            document.querySelector("#app"),
            ()=>{
                console.log("渲染成功")
            }
        );

Fragment

必须有,且只有一个顶层的包含元素 - React.Fragment

        let {Fragment} = React;
        ReactDOM.render(
            <Fragment>
                <div class="box" style={style}></div>
            </Fragment>,
            document.querySelector('#main')
        )

JSX注意事项

• JSX 是一个基于 JavaScript + XML 的一个扩展语法
  • 它可以作为值使用
  • 它并不是字符串
  • 它也不是HTML
  • 它可以配合JS 表达式一起使用
  • 它不可以配合 JS 语句一起使用
  • 所有的标签名必须是小写
  • 所有的标签必须是闭合，哪怕是单标签
  • class 要写做 className
  • style 接收的是一个对象，并不是字符串
    • style={{width:‘400px’}} 外层{} 是说这里是差值 内层的{} 是说这里是对象
      • 所以这里的结构：插值 包裹着 对象 所以有了{{}}
  • 每次只能输出一个标签(或者说必须要有一个容器)

xss

我们上述说了reactDOM内的element不可以写成字符串，具体原因为：为了有效的防止 XSS 注入攻击，React DOM 会在渲染的时候把内容（字符串）进行转义，所以字符串形式的标签是不会作为 HTML 标签进行处理的