react学习笔记
react 构建用户界面的javaScript库，主要用于构建UI界面，Instagram, 2013年开源。
特点：
1.声明式的设计
2.高效、采用虚拟DOM来实现DOM的渲染，最大限度的减少DOM的操作。
3.灵活，跟其他库灵活搭配使用。
4.JSX，俗称js里面写HTMl,javascript 语法的扩展。
5.组件化，模块化，代码容易复用发，2016年之前大型项目非常喜欢。
6.单向数据流，没有实现数据的双向绑定，数据=》视图=>事件=》数据
创建项目
1.CDN引入，仅用户学习调试
2.脚手架
安装：npm install -g create-react-app
创建项目： create-react-app my-demo cd
my-demo /进入目录 然后启动/ npm start
react元素渲染
// let h1=<h1>hello</h1>;
使用JSX的写法，可以创建JS元素对象
注意，JSX元素对象，或者组件对象，只能有一个父元素
React Jsx
优点：
1.JSX执行更快，编译为javascript代码时进行了优化
2.类型更安全，编译过程如果出错就不能编译，及时发现错误
3.jsx编译模板更加简单快捷（不要跟vue比）
注意：
1.jsx必须要有根节点
2.正常的普通HTML元素要小写，如果是大写，默认认为是组件
JSX表达式{{ ? : }}
1.有Html元素构成
2.中间如果需要插入变量用{}
3.{}中间可以使用表达式
4.{}中间表达式中可以使用jsx对象
5.属性和html内容一样都是用{}来插入内容
JSX style 样式
1.class中，不可以存在多个class属性
2.style之中，如果存在多个单词的属性组合，第二个单词开始，首字母大写，或者
用引号引起来，否则会报错。
3.多个类共存的问题。
4.注释：必须在{}里面写，否则报错{/**/}
react组件
1.函数式组件
2.类组件
3.复合组件，组件中又有其他的组件，既可以有函数式组件，又可以有类组件
区别：函数式组件一般用于静态没有交互事件内容得组件
类组件，一般又称为动态组件，那么一般会有交互或者数据修改得操作。
react state
相当于vue的data,但是使用方式跟vue不一样
组件的构造函数不会重新执行，只有render函数会重新执行
props父传子
父传递给子，单向流动，不能子传递给父
props的传值可以是任意的类型
props可以设置默认值
HelloMessage.defaultProps={name:'白敬亭'，msg:'123'} //HelloMessage是组件名
注意:props可以传递函数，props可以传递父元素的函数，就可以去修改父元素的state，
从而达到传递数据给父元素
props子传父
调用父元素的函数从而操作父元素的数据，从而实现数据从子元素传递至父元素
react事件
特点：
1.react绑定事件命名，驼峰命名法，驼峰命名法onClick
2.{}，传入一个函数，而不是字符串
事件对象：React返回的事件对象是代理的事件对象，如果想要查看事件对象的具体值，必须
直接输出事件对象的属性
原生，阻止默认行为事，可以直接返回return false
在react中阻止默认必须使用e.preventDefault()
react事件传参：
{/* 不使用箭头函数的方式 */}
<button onClick={function(e){this.prevent1({mag:'123'},e)}.bind(this)}>点击</button>
{/* 使用箭头函数 */}
<button onClick={(e)=>{this.prevent1({mag:'123'},e)}}>点击</button>
react 条件渲染
react中条件渲染即使和javascript中，条件运算，汝if…else…三元运算符等。
1.直接通过条件运算返回要渲染的jsx对象
2.通过条件元素得出jsx对象，在将jsx对象渲染到模板中。
案例一：
// 直接通过条件运算返回要渲染的jsx对象
render(){
if(this.state.isLogin){
return(<UserGreet></UserGreet>)
}else{
return(<UserLogin></UserLogin>)
}
}
案例二：
//通过条件元素得出jsx对象，在将jsx对象渲染到模板中。
render(){
let element=null
if(this.state.isLogin){
element=<UserGreet></UserGreet>
}else{
element=<UserLogin></UserLogin>
}
return(
<div>
<h1>这是头部</h1>
{element}
<h1>这是三元运算符的操作</h1>
{this.state.isLogin?<UserGreet></UserGreet>:<UserLogin></UserLogin>}
<h2>这是尾部</h2>
</div>
)
}
列表渲染
将列表内容拼装成数组放置到模板中。
将数据拼装成数组的jsx对象。
使用数组的map方法，对每一项数据按照jsx的形式进行加工，最终得到1个每一项都是jsx对象的
数组，在将数组渲染到模板中。
key值需要放置到每一项中。
本文地址：https://blog.csdn.net/qq_44929535/article/details/109638765