一、React入门

1.React概述

1.由来

React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MV* 框架，都不满意，就决定自己写一套MV框架，用来架设 Instagram 照片墙 的网站（17年 用户量7亿+）。做出来以后，发现这套东西很好用，就在2013年5月开源了

2.是什么

简单概括：React是当下很火的一个JS库&框架（facebook）

3.用处

用于构建用户界面的 JavaScript 库。由 Facebook 开发且开源。

4.使用

官网

React 官方中文文档 – 用于构建用户界面的 JavaScript 库 (docschina.org)

进入官网 --> 快速开始 --> CDN链接 --> 复制三个CDN链接

• react.development.js ：React 核心库
• react-dom.development.js ：提供 DOM 操作的 React 扩展库
• babel.min.js ：解析 JSX 语法，转换为 JS 代码

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

<script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>

2.Js创建虚拟Dom

1.语法：

1. 通过React.createElement(标签名，标签属性/null，元素内容)创建虚拟dom
   • 第一个参数是必填，值为字符串，传入的是似HTML标签名称，eg: ul, li
   • 第二个参数是选填，值为对象，表示的是标签的属性，eg: className，没有属性就写null
   • 第三个参数是选填, 子节点，eg: 要显示的文本内容，多个元素用数组
2. 通过 ReactDOM.render(template,targetDOM)渲染虚拟dom
   • template是创建的模板
   • targetDOM是是插入该模板的目标位置，也就是渲染区域

2.例子

<div id="root"></div>

<script type="text/javascript">
    const li1 = React.createElement('li', null, '锄禾日当午，')
    const li2 = React.createElement('li', null, '汗滴禾下土。')
    
    const ul1=React.createElement('ul',null,[li1,li2])

    ReactDOM.render(<ul1/>,document.querySelector('#root'))

</script>

3.JSX

使用createElement创建react对象/虚拟DOM非常的麻烦

为了更方便创建虚拟Dom，推荐使用JSX

1.什么是JSX

jsx是javascrip的一个超集，语法扩展

JavaScript XML
J   S      X

JSX是JS扩展语法，浏览器不识别，需要通过babel库来转换

使用jsx语法必须给<script>标签添加type="text/babel"属性

//引入bable库
<script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>


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

2.语法

JSX语法只用写html结构，不用写"",一般用在（）里写，也可以在空标签<></>里写，空标签不会渲染真实dom

省略引入 react、reactdom、babel库
<div id="root"></div>

<script type="text/babel">
	const ulElement = (<ul>
                        <li>锄禾日当午，</li>
                        <li>汗滴禾下土。</li>
                        <li>谁知盘中餐，</li>
                        <li>粒粒皆辛苦。</li>
    				</ul>)
    
    ReactDOM.render(<ulElement/>, document.querySelector('#app'))
</script>

3.访问数据

在{}里写数据，与vue不同，只有一对{}

const ulElement = (<h1>{111}</h1>)

4.注释

注释掉的内容不会渲染dom

{/* <b>锄禾日当午</b> */}

4.条件渲染

react中没有想vue中v-if一样的指令

可以用以下方式控制元素显示与隐藏，并且是控制真实的dom

1. 函数返回值
2. 元素变量
3. 三元表达式

1.函数返回值

声明一个函数，根据不同条件返回不同jsx

const Test=()=>{
    const [age,setAge]=React.useState(1)

    const showWhat=()=>{
        if(age<5){
            return <h1>小学</h1>
        }else if(age>=5&&age<12){
            return <h1>中学</h1>
        }else {
            return <h1>大学生</h1>
        }
    }

    return (
        <div>
            <button onClick={()=>setAge(age+1)}>年龄+1</button>
            <h1>{age}</h1>
            {showWhat()}
        </div>
    )
}
ReactDOM.render(<Test/>, document.querySelector('#app'))

2.元素变量

const Test=()=>{
    const [age,setAge]=React.useState(1)

    let dom=null

    if(age<5) dom=<h1>小学</h1>
    else if(age>=5&&age<8) dom=<h1>中学</h1>
    else dom=<h1>大学</h1>

    return (
        <div>
            <button onClick={()=>setAge(age+1)}>年龄+1</button>
            <h1>{age}</h1>
            {dom}
        </div>
    )
}
ReactDOM.render(<Test/>, document.querySelector('#app'))

3.三元表达式

const Test=()=>{
    const [visible,setVisible]=React.useState(false)

    const handleShow=()=>{
        setVisible(!visible)
    }
    return (
        <div>
            <button onClick={()=>handleShow()}>显示/隐藏</button>
            {visible?<div>此dom可移除</div>:null}
        </div>
    )
}
ReactDOM.render(<Test/>, document.querySelector('#app'))

5.列表渲染

react中列表渲染需要使用数组的map方法

遍历时记得给循环项加key

1.map方法遍历

const Test=()=>{
    const [list,setList]=React.useState([
        {id:1,name:'喜羊羊',score:90},
        {id:2,name:'美羊羊',score:80},
        {id:3,name:'费羊羊',score:60},
        {id:4,name:'懒羊羊',score:20},
    ])

    return (
        <div>
            {list.map(item=>{
                return <li key={item.id}>{item.name}:{item.score}</li>
            })}
        </div>
    )
}
ReactDOM.render(<Test/>, document.querySelector('#app'))

2.filter+map过滤并遍历

显示成绩大于60的羊

const Test=()=>{
    const [list,setList]=React.useState([
        {id:1,name:'喜羊羊',score:90},
        {id:2,name:'美羊羊',score:80},
        {id:3,name:'费羊羊',score:60},
        {id:4,name:'懒羊羊',score:20},
    ])

    return (
        <div>
            {list.filter(item=>item.score>60).map(item=>{
                return <li key={item.id}>{item.name}:{item.score}</li>
            })}
        </div>
    )
}
ReactDOM.render(<Test/>, document.querySelector('#app'))