react
react
jsx核心只能在脚手架里面写，不能在html里面写
多行在（）里面写
js表达式单个花括号{}
<------------这是html得写法--------------->
<lable for="cc"></lable>
<input id="cc">
可以快速选择，直接点哪个就好
<--------------react写法------------------>
在react中如果用for得话得htmlFor这么写
jsx表达式用一个{}表示，和小程序还有vue正好差一个
在{}里面可以写数组，变量、可以函数调用，三元表达式，值，但是不能写语句和对象比如：if或者else 还有对象等
三元表达式就是一个布尔值，第一个值是true，第二个值是false，具体看怎么定义了
行内样式不推荐使用，写一俩个样式可以的
建议使用用类名小驼峰得形式className来定义样式
注册函数组件必须首字母大写，组件标签可以单闭合,前提是没有子元素
事件绑定得时候也是小驼峰命名法on+事件处理名字（第一个首字母大写）={事件处理程序}这么写
在react里面阻止冒泡或者默认行为不可以写reutrn false,得用原生得事件e.什么什么的（当然了这个e是一个默认事件，在function（e）），console.log(e) e 就是这么来的
类组件有实例，函数组件没有，简单来说就是类组件是有状态的组件，函数组件没有状态，状态就是state（是个对象）即数据的意思，数据变化的一个过程,组件内部的私有数据，只能内部访问
如果修改这个数据的话需要setState（）里边传个对象{key：value}
在 react中，就只是写一俩行代码的话，就是写样式的话就是第一个值是标签{style:{color: red}}如果没有样式就是null，第三个值是需要渲染的东西
记住循环渲染一个列表的时候，一定要加key，在开始标签的里面加，例如
函数组件只能定义变量let
函数名当标签渲染，首字母大写
为什么开发时要用箭头函数，因为改变this的指向问题
…是浅拷贝，不会改变原数组
函数组件通过默认得形参props接收父组件的，前提是静态的，没有js动态
类组件是通过this.props实例获取的,必须得写这个
前端中一般有的三个异步：网络请求、定时器、事件绑定
reacr和vue中得核心思想就是数据驱动视图，主要是弄数据，不是视图
中间件主要干的事就是二次处理数据
axios里面不能发jsonp
在react里面index.js是导入全局样式，全局插件或包的配置，跟组件是使用其他组件，意思就是要么玩路由要么使用其他组件
先导别人的样式，在导自己的
props的作用就是接收外部数据，在组件自己没有数据的时候就this.props
react编程式导航this.props.history.push(这里边写网址)
组件玩路由就是this.props然后点什么什么
小驼峰命名法就是第一个单词小写后面的大写，大驼峰命名法就是第一个单词的首字母大写第二个也是。。。
react在jsx中js的表达式就是{}但是不能写一些if这些东西，vue的js表达式是{ {}} jsx自身也是一个表达式
循环的时候和vue一样必须得有key得值
react中行内样式用{ {}}包裹
vue可视化的图层是vue ui
npm是项目
es5创建类和es6创建类
es5中创建类当看不到constructor属性时是因为object.create接收俩个参数，第一个参数是原型上定义得方法，第二个接收一个对象，对象里面写construtor接收一个默认得value:附上那个构造函数
es6继承得话用到一个关键字extends
es5定义静态属性是点child.sta = 100 es6定义静态属性是空格child sta = 100
es5创建类是以函数得形式第一个首字母大写继承的话会用到call的一个方法
es6定义属性直接写属性名 = 值就好了 定义方法就是 cc （）{}
在react用es6定义的类也可以在渲染的时候不用标签显示但是会报错
这是不用标签的问题
react中图片渲染不出来
https://www.html.cn/create-react-app/docs/adding-images-fonts-and-files/传送门
当我想设置直接背景图片的时候，我朋友告诉我了 用import形式引入图片，然后在jsx里面用 一定要用react的核心符号{} 记住把引号删掉，要不就成字符串了
图片和文字对齐的方式vertical-align: middle;display: inline-block; margin-bottom:一起写上
react app.js是写路由或者其他组件的 框架需要导入js和css
样式文件写在index.js中 这个就是导入全局需要用的一些样式文件 先导别人的在导自己的
创建组件 然后在路由上写上component={}
在react中使用 渲染不出来空格的话给这个便签写一个css样式就可以了white-space:pre;
原生js跳转页面的方式
.window.location.href
// 将js直接写在html中
点击跳转
//将js和html分开
点击跳转
//需要注意的是，这里的window可以省略，即直接使用location.href
点击跳转
2.location.replace
// 将js直接写在html中
点击跳转
//将js和html分开
点击跳转
window.location.href 和 location.replace的区别：
有3个页面 a,b,c。 如果当前页面是c页面，并且c页面是这样跳转过来的：a->b->c
b->c 是通过 window.location.replace("…xx/c") 此时b页面的url会被c页面代替，并且点击后退按钮时会回退到a页面（最开始的页面）
b->c是通过 window.location.href("…xx/c") 此时b页面的路径会被c页面代替，但是点击回按钮后页面回退的是b页面
3.window.navigate(“https://www.baidu”)
// 将js直接写在html中
点击跳转
//将js和html分开
点击跳转
window.location.href 和 window.navigate的区别：
首先说明的是 window.navigate 与 window.location.href 都是实现页面链接跳转的。
window.navigate 这个方法是只针对IE的，不适用于火狐等其他浏览器，在HTML DOM Window Object中，根本没有列出window.navigate这个方法，所以这个方法尽量少用，遗忘最好。
window.location.href 兼容所有浏览器的。因此在实现页面跳转的时候还是使用这个比较靠谱。
4.window.open(“https://www.baidu.com”)
// 将js直接写在html中
点击跳转
//将js和html分开
点击跳转
2.self.location 和 top.location(两者的写法实相同的)
// 将js直接写在html中
点击跳转
//将js和html分开
点击跳转
self.location 和 top.location 的区别和作用：
两者可以结合起来，防止非法引用我们的网页
假如你的网页地址是:http://www.a.com，别人的网址是http://www.b.com。他在他的页面用iframe等框架引用你的http://www.a.com
3.那么你可以用一下代码，来转向你的页面
if(top.location.href!=self.location.href){
location.href=“http://www.a.com”;
}
css与基线对齐vertical-align：
css的省略号 word-wrap: break-word;
word-break: break-all;
overflow: hidden;
1.使用overflow: hidden把超出的内容进行隐藏；
2.然后使用white-space: nowrap设置内容不换行；
3.最后使用text-overflow: ellipsis设置超出内容为省略号
css去掉ul的小圆点list-style：none；
在写css的时候一定要写margin：0 auto；
让版心居中还有自适应
二级路由router不用写
this.props.history.push(’/home/xiangqingye’) 直接跟组件名就行不用写路径
只能写jsx在 return（）
es6中在class里面的话是实例上的，在外面就是–proto–
css颜色渐变（从上到下）：background-image: linear-gradient(#e66465, #9198e5);
（从左到右）：background-image: linear-gradient(to right, red , yellow);
（左下角到右下角）：background-image: linear-gradient(to bottom right, red, yellow);
静态属性只能在class上面拿
react中出现冒泡的话那么需要react中提供的一个函数形参e
调用者是谁this就指向谁
单例模式的使用场景：
有constructot（）就必须的有super（） 可以改变拿不到的this
箭头函数在创建的时候就知道this的指向了
在react中使用less需要先下载包npm install -g less
第二步要下载这俩个包
npm install node-less-chokidar --save-dev
npm install npm-run-all --save-dev
然后配置package.josn
“scripts”: {
"start": "npm run build-css && run-p -ncr watch-css start-js",
"start-js": "react-scripts start",
"build": "run-s -n build-css build-js",
"build-js": "react-scripts build",
"test": "run-s -n build-css test-js",
"test-js": "react-scripts test --env=jsdom",
"build-css": "node-less-chokidar src",
"watch-css": "node-less-chokidar src --watch"
},
react中实现双向绑定也是获取vulue的值，在state中定义value的值，然后利用事件处理对象e.target.value获取输入input中的值就ok了
非受控组件就是根据react中提供的一个txtRef = react.createRef（）的方法，然后在标签里面写ref={this.txtRef}
函数组件没有实例
单选框与文字对齐 vertical-align:middle;
react在组件中使用this.props.history.push(’/search’)会报错push是undefined那么怎么解决呢，利用react中高阶withRouter高阶组件，提供了history让你使用，直接引入import {withRouter} from “react-router-dom”; 然后直接包裹导出的那个文件名字export default withRouter(MyComponent);就可以用了。
react中渲染列表一定要方法+（）在render外面定义方法的时候
在react中怎么区分输入的名字还是内容那就给输入框加name属性，加属性的时候有讲究，定义什么加什么
push可以改变数组的长度，而…不会
react父传子直接在标签后面加需要传的值{this.state.list} 子组件中函数组件接受一个默认的形参
js中实现时间戳
react中阻止默认行为： e.stopPropagation() e.preventDefault();
拿类名·或者那es5的构造函数·就是一个静态属性。
在react中使用原生js跳转页面的时候，使用window.location.href()会报这样一行错误window location href is not a function这是因为由于写法问题以及浏览器不兼容导致的，得这样写
错误的写法：
window.location.href (“http://www.02405.com/”);
正确js写法：
window.location.href = “http://www.02405.com/”;
上面的正确js写法可以兼容绝大部分浏览器，但是在某些版本的firefox浏览器下仍然可能报错，解决办法是采用下面的写法：
window.location = “http://www.02405.com/”;
在react中使用鼠标悬浮让一个标签隐藏然后显示另一个标签。我原先想的是.类名：hover.类名可是这么不管用，然后在hover后面加个一个+就ok了。
display:list-item 是加前面的小原点的
如果要做一个在title标题前面的logo的话只需要在head便签里边写link标签，其他的属性一点不重要，只需要写herf属性链接上你图片的地址就可以了。
在react中我封装了一个组件，然后想在点击组件a标签的时候跳转，思来想去不知道咋办，后来上网查了一下说用scrooltop但是不行，经过一番研究利用a标签的herf属性就可以了，路径后面跟上#id名就ok
react中阻止发送信息以后默认换行
e = e || window.event;
e.preventDefault();
当然了写个定时器也可以
在react中使用cssmodules的时候修改antdesign的样式的时候会把其他的样式也修改了，我们可以给组件添加一个类名直接写className=“mystyle”这样就相当于添加了一个唯一的表示符。而这样就是添加类名，所以就不能用className={cc.style}这样了
react用别人组件的时候因为同事用的sass而我用的css，所以当天就出现了bug，怎么也搞不明白，下载了那么多sass的插件，也没有，后来才发现是因为我没有改类名，是因为用的module的原因，唯一的标识不一样所以就不能用。改回来就好了。
鼠标悬浮的时候如果图片失真的话就用max-width和max-height
子组件给父组件传值（亲身体验）
先在自己抽离的组件中写一个函数
Handleguanzhu = (props) => {
this.props.getMsg(props)
}
然后给抽离组件的某个标签一个点击事件
onClick={ this.Handleguanzhu（‘2’)}我想的是得把这个参数传到props中，但是这么写会报错的，因为加上括号立马执行了，底下是报错的信息
Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.
然后就加了一个bind，就可以用了
onClick={ this.Handleguanzhu.bind(this,‘2’)}
为什么加bind我也不太清楚现在，只能以后慢慢了解了。先做出来。
Diyigeword这是组件
然后在组件的标签上写一个函数
getChildMsg = (msg) => {
console.log(‘接受的子组件数据’,msg)
this.setState({
key: msg
})
}
这个getmsg一定要和this.props.getmsg对应上。就是在抽离的组件中写的函数props点后面的名字，要不然也会报错。
下午在思考一个逻辑，点击上边悬浮的关爱女性俩癌套餐的时候，让他显示到tabs上的关爱女性俩癌套餐。现在是点击他的时候可以到关爱女性俩癌套餐的，解决的方案就是用了react的一个子组件给父组件传递数据的方案，先给父组件state的值一个空值，点击的时候再给子组件把父组件的值给传过去，然后用setstate修改state的值改成子组件的key的值，利用react给tabs的activekey绑定{this.state.key}修改他的值，这样就可以跳到tabs的标签上了