React阶段 - 一线大厂必备技能？！

初识 React

React是一个用于构建用户界面的 JavaScript 库。

初步认识

基础架构

这里使用过的是下载好的React.js文件

• React.js 提供核心代码
  <script src="../js/react.js" ></script>
• ReactDOM 提供了与浏览交互的DOM功能，虚拟DOM
  <script src="../js/react-dom.js" ></script>
• 代码展示
  js结构中的有三个参数

    <script src="../js/react.js" ></script>
    <script src="../js/react-dom.js" ></script>
    <div id="root"></div>
    <script>
        ReactDOM.render(
        	// 参数1：加载到页面的内容
            "心情复杂",
            // 参数2：指定的盛放容器，类似于 vue 的挂载点
            document.querySelector("#root"),
            // 参数3：回调函数，元素加载成功后执行的功能
            ()=>{
                console.log("so easy")
            }
        )
    </script>

• 页面效果
  

灵活化

将页面加载的元素可以提取出来变量的形式保存
let h = React.createElement("h1",null,"心情复杂")
参数1：标签形式、种类
参数2：添加的标识class类名、id名等
参数3：子元素的内容（可以嵌套更多的标签）

• 代码展示

    <script src="../js/react.js" ></script>
    <script src="../js/react-dom.js" ></script>
    <div id="root"></div>
    <script>
        let h = React.createElement("h1",null,"心情复杂");
        let p = React.createElement("p",null,"心情复杂+1");
        let el = React.createElement(
            "header",
            {id:"test"},
            h,
            p // 子元素 嵌套的内容
        );
        ReactDOM.render(
            el,
            document.querySelector("#root"),
            ()=>{
                console.log("so easy")
            }
        )
    </script>

• 页面结构
  

引入JSX

引入jsx概念 实质上就是javaScript和Xml的扩展语法
可以实现直接在加载页面内容的位置，填写html标签
引入babel.js文件，同时在script标签上添加属性type="text/babel"

• 代码展示

    <script src="../js/react.js" ></script>
    <script src="../js/react-dom.js" ></script>
    <script src="../js/babel.js" ></script>
    <div id="root"></div>
    <script type="text/babel">
        /* *
         *  JSX: javaScript 和 Xml 的扩展语法
         * */ 
        ReactDOM.render(
            <header>
                <h1>hello</h1>
                <h2>ByeBye</h2>
            </header>,
            document.querySelector("#root"),
            ()=>{
                console.log("so easy")
            }
        )
    </script>

• 页面结构
  

插入数据

注意和vue一样，不能直接使用整体对象，只能使用其中的一个属性

• 代码展示

    <script src="../js/react.js" ></script>
    <script src="../js/react-dom.js" ></script>
    <script src="../js/babel.js" ></script>
    <div id="root"></div>
    <script type="text/babel">
         let str = "测试 就是测试而已";
         let data = 123;
         let u = undefined;
         let arr=['内容A','内容B','内容C'];
         // 不允许直接使用对象
         let obj={
             name:'秦兟',
             sex:'男'
         }
        ReactDOM.render(
            <header>
                <h1>hello {str} {data} {u}</h1>
                <h3>{arr}</h3>
                <h3>{obj.name}</h3>
                <h2>ByeBye</h2>
            </header>,
            document.querySelector("#root"),
            ()=>{
                console.log("so easy")
            }
        )
    </script>

• 页面效果
  

条件输出（逻辑判断语）

三目运算? ... : ... 类似 if…else
逻辑与&& 类似 if (!) 取反
逻辑非 || 类似 if()

• 代码展示

    <script src="../js/react.js" ></script>
    <script src="../js/react-dom.js" ></script>
    <script src="../js/babel.js" ></script>
    <div id="root"></div>
    <script type="text/babel">
        // ?  : 类似 if...else
        // ||   类似 if(!) 取反
        // &&   类似 if()
        let a = true;
        ReactDOM.render(
            <header>
                <h1>hello</h1>
                <h3>{false ? "正确" : "错误"}</h3>
                <div>{false || "逻辑运算符||"}</div>
                <div>{ a && "逻辑运算&&"}</div>
                <h2>ByeBye</h2>
            </header>,
            document.querySelector("#root"),
            ()=>{
                console.log("so easy")
            }
        )

• 页面效果
  

列表循环渲染

写法一

• 代码展示

    <script src="../js/react.js" ></script>
    <script src="../js/react-dom.js" ></script>
    <script src="../js/babel.js" ></script>
    <div id="root"></div>
    <script type="text/babel">
        let data = ["测试1","测试2","测试3","测试4"]
        function showData(){
            let arr = [];
            data.forEach(item=>{
                arr.push(<li>{item}</li>)
            })
            return arr
        }
        ReactDOM.render(
            <header>
                {showData()}
            </header>,
            document.querySelector("#root"),
            ()=>{
                console.log("so easy")
            }
        )
	</script>

• 页面效果
  
  写法二
• 代码展示

    <script src="../js/react.js" ></script>
    <script src="../js/react-dom.js" ></script>
    <script src="../js/babel.js" ></script>
    <div id="root"></div>
    <script type="text/babel">
        let data = ["测试1","测试2","测试3","测试4"]
        ReactDOM.render(
            <ul>
                {
                    data.map(item=>{
                        return <li>{item}</li>
                    })
                }
            </ul>,
            document.querySelector("#root"),
            ()=>{
                console.log("so easy")
            }
        )
	</script>

• 页面效果
  

JSX的注意事项

可以作为值使用
不是字符串
不是html
可以配合 js 表达式一起使用
不可以和 js 语句一起使用
所有的标签必须小写
所有的额标签必须闭合，哪怕是单标签
class 要写作 className（虽然 class 也能使用，会报错）
style 接收的是一个对象,并不是字符串
每次只能输出一个标签（或者说必须只有一个根组件）
唯一父级/唯一容器

• 代码展示

    <script src="../js/react.js"></script>
    <script src="../js/react-dom.js" ></script>
    <script src="../js/babel.js" ></script>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: aquamarine;
            line-height: 200px;
        }
    </style>
    <div id="root">
        <div id="header"> </div>
        <div id="body"> </div>
        <div id="footer"> </div>
    </div>
    <script type="text/babel">
    	let style = {
        	color:"red"
    	}
        ReactDOM.render(
        	// 方式一：
            // <div className="box" style={ {color:"red"} }>
            // 12345
            // </div>,
            // 方式二：
            <div>
                <div className="box" style={style}>
                    12345
                </div>
            </div>
            ,
            document.querySelector("#header"),
            ()=>{
                console.log("so easy")
            }
        )
    </script>

• 页面效果
  

替换唯一的容器

由于JSX的限制，要求最外层只能为一个标签，导致页面上会出现n层嵌套
看他不爽，安排！

• 核心代码展示

    <script type="text/babel">
        let style = {
            color:"red"
        }
        let {Fragment} = React;
        ReactDOM.render(
            // <div className="box" style={ {color:"red"} }>
            // 12345
            // </div>,
            <Fragment>
                <div className="box" style={style}>
                    12345
                </div>
                <p> "添加的内容" </p>
            </Fragment>,
            document.querySelector("#header"),
            ()=>{
                console.log("so easy")
            }
        )
    </script>

• 页面效果