2020-08-31

首先需要先安装：npm init -y

然后下载相应的：npm i react react-dom babel-standalone

​ 新建js文件夹把上面下载的文件移动到js文件夹

	(react/umd/react.development.js)
    (react-dom/umd/react-dom.development.js)
    (babel-standalone/babel.min.js)

在写代码的时候要把上面三个js文件引入（每个项目都需要加），

<script src="./js/react.development.js"></script>
<script src="./js/react-dom.development.js"></script>
<script src="./js/babel.min.js"></script>

书写的格式 **ReactDOM.render()**固定格式

<div id="app"> </div>

<script type="text/babel">    //需要改样式的格式。默认type="text/javascript"
    // console.log(ReactDOM)   

    // 将h2节点渲染到指定的app节点上面去。
    // jsx代码        参数一：要插入的内容。参数二：挂载点
    ReactDOM.render(<h2>我是h2哦</h2>,document.getElementById("app"))
</script>

jsx编译规则：

• jsx内部借鉴了xml一些语法规范，标签必须是闭合的、只能有一个根元素
• 在jsx代码中class属性应该改成className

const a = <div><h2 className='abc'>我是h2</h2><p>我是P标签</p></div>

jsx内部的编译原理： Babel会把jsx代码转译成一个名字React.createElement()方法进行调用

 上面一行代码为例：
 const a = React.createElement(
                     'div',
                     {},
                     React.createElement('h2',{className:'abc'},"我是h2"),
                     React.createElement('p',{},"我是p"),
  );
  
  也就相当于：
  ReactDOM.render(a,document.getElementById("app"))

在jsx代码模式添加style属性的时候，

• 行内样式

  想给虚拟dom添加行内样式，需要使用表达式传入样式对象的方式来实现：

// 注意这里的两个括号，第一个表示我们在要JSX里插入JS了，第二个是对象的括号
 <p style={{color:'red', fontSize:'14px'}}>Hello world</p>

还可以使用这种方法

const style = {color:'red', fontSize:'14px'}

<p style={style}>Hello world</p>

• 使用class

React推荐我们使用行内样式，因为React觉得每一个组件都是一个独立的整体

其实我们大多数情况下还是大量的在为元素添加类名，但是需要注意的是，class需要写成className（因为毕竟是在写类js代码，会收到js规则的现在，而class是关键字）

Hello world

渲染方式：

• react中通过{}来渲染变量 （只要写js代码了，就需要通过引入{}语法）
• null | undefined | boolean 都不会在{}中进行渲染
• 数组会渲染成字符串
• 注意： {}中不能直接放入对象类型！ json对象不能扔进去，报错！
• jsx中注释需要 {/jsx代码/}

	const a = 10
        ReactDOM.render(<div>
            <p>{a}</p>    //react中通过{}来渲染变量 （只要写js代码了，就需要通过引入{}语法）
            <p>{"hello".substr(0,2)}</p>
          11{[1,2,3]}</p>   //数组会渲染成字符串
            {/*<p>{ {a:1} }</p>*/}   jsx中注释需要 {/*jsx代码*/}
            <p>{function(){alert(2)}()}</p>
        </div>,document.getElementById("app"))

绑定事件：

绑定事件 遵从驼峰式写法 οnclick==>onClick οnkeyup==>onKeyUp

const app = <div><p id="p1" onClick={()=>alert('asldjlakjdlakdjl')}>我是p标签</p><input onKeyUp={()=>console.log(1111)}/></div> 

ReactDOM.render(<div>{app}</div>,document.getElementById("app"))


		// 下述写法麻烦，谨记写在render下面！
        // document.getElementById("p1").onclick = function(){
        //     alert("点击了哦...")
        // }

数组的map迭代与key：

在react里，没有像vue里面v-for= v-if v-show v-once v-model v-on v-bind 这些方法，在react里我们可以写内部运行原理的类似于原生js的代码，下面我们举例写遍历的代码：

const arr = ["a","b","c","d"]
        ReactDOM.render(<div>
            <ul>
                {
                    arr.map((item,index)=>{
                        return <li>{item}</li>
                    }) 
                }
            </ul> 
        </div>,document.getElementById("app"))

如果仅仅是这样写的话，会报没有添加key值的错。所以我们需要添加key值，作用为：

• key 帮助 React 识别哪些元素改变了，比如被添加或删除。因此你应当给数组中的每一个元素赋予一个确定的标识
• 虚拟dom对比的时候，加key可以避免出错。 如果不加key，当一个元素添加的时候，后面的元素就会经历卸载与重新装载的过程。
• 为了避免出错。所以我们在开发中应该尽量避免用index作为key值，除非我知道index是不变的。

代码改为

			   {
                    arr.map((item,index)=>{
                        return <li key={index}>{item}</li>
                    }) 
                }

此时加上key值，报错就会消失。

react中map的应用

当需要遍历数组时，特别是需要遍历多个数组时，我们就可以封装函数，从而提高代码的复用率，还要注意两点哦，1.数组的map可以进行遍历，需要加唯一的key值，2.封装成函数的话，记得内部需要加return关键字！

<div id="app"></div>

//当为多个数组时。
var arr = ["a","b","c"]
var arr2 = ["d","e","f"]

	//封装函数
	  function showList(arr){
            return arr.map((item,index)=>{
                return <p key={index}>{item}</p>
            })
        }
        
    //调用封装的函数
    ReactDOM.render(<div>
                {
                    showList(arr)
                }
                {
                    showList(arr2)
                }
            </div>,document.getElementById("app"))
    

return 后面返回一段jsx代码的时候，最好加()，为了避免问题

react不是vue的那种双向数据绑定的框架，数据改变了，视图不会主动渲染。需要我们手动的去执行render函数！

下面例题：要求是让第一项默认添加红色，后续点击每一项，每一项变红

var arr = ["a","b","c"]
var currentIndex = 0
function showList(arr){
	return(
		<ul>
			{
				arr.map((item,index)=>{
					return (
						<li
						key={index}
						onClick = {()=>currentIndex=index;render()}
						style = {{color:index===currentIndex?"red":""}}
					)
				})
			}
		</ul>
	)
}

render()
function render(){
	ReactDOM.render(<div>
		{showList(arr)}
		</div>,document.getElementById("app")
	)
}