react学习值得注意的点

1 react环境搭建

npm i yarn --推荐使用yarn
npm i -g create-react-app --安装react脚手架
cd react
create-react-app test --创建react框架
cd 到test里可以 npm start
react基于jsx语法jsx是react的核心组成部分

2 react目录结构

mainifest是pwa提供的一项重要功能（允许将站点添加到主屏幕）
在组件中里面的constructor构造函数里面要写super()
super指代父类的实例（父类的this对象）。子类必须在constructor里调用super，因为子类里没有自己的
this对象，而是继承父类的this对象，不调用就得不到，言简意赅的话就是
如果想用this 前面必须要有super()
如果要做父子组件传值的话super和constructor里要带参数

3
绑定属性注意 class -》className
for -》HTMLFor
行内样式写style style={{“color”:“red”}}

---

--一条横线分割线 jsx语法支持list2:[

1

,

2

,

3

]这么写

const result = this.state.list.map(function(value,key){
return (

• {value.title}
• 
  )
  }) --循环这么写render里调用就好

  4
  函数只要在constructor下面下就可并且不用在末尾添加逗号
  click me调用函数不需要加 ##（）代表执行###
  <button onClick={this.setMsg.bind(this,‘this is 1’)}>click me //函数里面有参数的话
  要这么绑定

  5事件对象：在触发dom上的某个事件时，会产生一个对象event。这个对象包含着所有与事件有关的
  信息。event.target可以获取当前的dom节点

  通过ref获得dom节点和vue中相同用法

  双向绑定-1、监听表单改变的值 2、在改变的事件中获取表单的值3、把表单输入的值赋值给username
  4、点击按钮实现功能
  e.preventDefault() //阻止表单默认提交

  其他会用到的事件：onKeyUp键盘抬起 onKeyDown onKeyPress

  真正的完全数据双向绑定-model改变view view改变反过来影响model
  后面这半句只要在填一个{this.state.username}就可以了

  ***getAttribute(idname) 利用这个方法可以获得自定义id的属性

  6
  react并不像vue是MVVM框架

  7，8做了个todolist回顾之前知识

  9保存缓存代办和办完的数据
  现在es6里的window是省略的默认就是指向Window

  ---

  localStorage.setItem()
  localStorage.getItem()

  10
  react中的组件：解决HTML标签构建应用不足

  父组件传值给子组件
  父：
  子：{this.props.titie}
  父组件传函数
  父：
  子：onClick={this.props.run}
  父组件转组件给子组件
  父：
  子：{this.props.new.list/run}
  自组件传值到父组件
  子：{this.props.run.bind(this,‘123’)}
  父：run=(value)=>{alert(value)}

  父组件主动获取子组件的数据
  父：
  子:{this.refs.test.state…}

  子组件传值给父组件的话
  **在父组件中写个函数（函数中接收值），然后传到子组件中，子组件调用这个函数在这个函数中传值从而把值送到父组件那里
  实现子组件向父组件传值

  11、
  defaultProps：父给子传值时如果不传值，子组件的默认值

  ---

  在子组件末尾写
  类名.defaultProps = {
  list:‘this is a default value’
  }

  propTypes:验证父组件传值合法性，如果传过去的数值不是对应的类型控制台提示warning
  首先插入 import PropTpyes from ‘prop-type’
  在子组件里面写
  leiming.propType = {
  list:PropType.string //规定接受的list必须是string类型
  }

  12、
  react中没有提供专门的请求数据的模块，但可以通过第三方请求书模块实现数据请求
  axios是ajax ajax不止axios
  ajax：
  本身是针对MVC的编程,不符合现在前端MVVM的浪潮
  基于原生的XHR开发，XHR本身的架构不清晰，已经有了fetch的替代方案
  JQuery整个项目太大，单纯使用ajax却要引入整个JQuery非常的不合理（采取个性化打包的方案又不能享受CDN服务
  axios：
  从 node.js 创建 http 请求
  支持 Promise API
  客户端支持防止CSRF
  提供了一些并发请求的接口（重要，方便了很多的操作）

  ---

  $.ajax({
  type: ‘POST’,
  url: url,
  data: data,
  dataType: dataType,
  success: function () {},
  error: function () {}
  });

  axios({
  method: ‘post’,
  url: ‘/user/12345’,
  data: {
  firstName: ‘Fred’,
  lastName: ‘Flintstone’
  }
  })
  .then(function (response) {
  console.log(response);
  })
  .catch(function (error) {
  console.log(error);
  });

  **域名端口协议三个里面有任意一个不同就引起跨域，
  跨域就获取不到数据 ，所以要求后台接口允许跨域
  （我们设置这个后台服务器允许跨域就可以了，就从这个服务器里接收数据，
  这样也不会影响跨域和同源的策略）

  react用axios就行
  npm i axios
  import axios from ‘axios’

  onclick触发函数时
  axios.get(’/api/123’).then(()=>{}).catch((err)=>{console.log(err)})
  还是要这样写的一样

  13、react生命周期函数
  组件加载的时候触发的函数：
  constructor、componentWillMount、render、componentDidMount
  组件更新的时候触发的函数：
  shouldComponentUpdate（默认返回true不然不更新数据）该函数可以带入两个函数输出分别是变化前后的值
  、componentWillUpdate、render、componentDidUpdate
  在父组件里改变props传值的时候触发：
  componentWillReceiveProps
  组件销毁时触发
  componentWillUnmount

  ***==v-show
  {
  this.state.flag?:’’
  }

  14、react路由
  npm i react-router-dom
  引入 import { HashRouter, Route,Link } from ‘react-router-dom’;
  HashRouter是匹配路由相当于router-view
  HashRouter里包裹着Route Route就指明了组件的路由 //注意exact
  *** exact是严格模式及/user/ 匹配不到/user/qwe 不加严格模式可以匹配到***
  Link相当于router-link

  15
  一个页面跳转到另一个页面
  1、get传值
  2、动态路由
  3、localStorage

  ---

  to={/half/${value.todo}} to用{}括起来是js语法用"“括起来是HTML语法
  ---这个包起来是es6模板字符串 因为拿过来的数据value.todo是字符串形式的 在这个符号里是模板字符串加上${}让他知道这个是从外部去的值 --就像在后台写sql语言一样
  to=”’/half/’ + value.todo" 也可以这么写

  那个vue里的那个动态路由到不同的页面是

  ---

  这是用get方法跳转也可以实现

  动态路由的话和vue一样 获取动态路由值{this.props.match.params.aid}
  get传值获得路由值{this.props.location.search}

  16、

  ---

  每行保留3个图片或者其他的东西，把图片width设置成33.3%，其他保留4张或者其他的以此类推

  box-sizing:border-box 就是让该标签的边框就是看到的部分，跟padding，margin没关系，常用于图片之前有间隙的设置

  ---

  双层循环map((value,key)=>{
  return ({value.list.map((v,k)=>{})})
  })

  ---

  有时看到获取数据的时候res.data.result[0] 会有这么一个result[0]因为这个数组返回的是数组
  你要去第几个数组的值，或者就一个，你打印一下props就可

  ---

  请求完的数据可以放到state里面
  ***如果想动态路由对应不同的界面，先拿到对应的id–this.props.match.params.id
  前提是有对应的接口，且允许跨域接收（你在axios的时候get一个api，后台服务器也会传一个api这是我们
  常规的操作，这是同域的）然后axios写一个api就好了（‘http://getdata/’+{this.props.match.params.id}）
  然后componentDidMount时调用获取对应数据就好

  ---

  ---

  vue中通过v-html解析HTML标签（就是请求来的json数据里有HTML标签）
  react里的话

  
  通过dangerouslySetInnerHTML来解析

  ---

  如果没有用map渲染页面而是单单用数据渲染页面 render会在state有值时改变，值变化后再执行一次 所以有些
  获取api的会在第一次的时候报错not found 只需加个判断条件就好
  {this.state.list.img?<img src={${api}${aid}}/>:""}

  router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
  //这里判断用户是否登录，验证本地存储是否有token
  if (!localStorage.token) { // 判断当前的token是否存在
  next({
  path: ‘/login’,
  query: { redirect: to.fullPath } //to.fullPath是重点
  })
  } else {
  next()
  }
  } else {
  next() // 确保一定要调用 next()
  }
  })
  ------------------------------用户没登录进页面跳回登录页面

  ---

  通过export方式导出，在导入时要加{ }，export default则不需要 {}里的必须是命名的不能自己取，和导出的一样
  因为export可以有很多个，而export default只能有一个所以 {}里要用导出的名，不然他不知道你引用的那个

  js跳转路由的话比如登录 在react-router-dom 里插入Redirect
  if(this.state.current){return < Redirect to={{pathname:’/’}}/>} //需要设置一个current判断是Y or N

  ---

  明天先看css 大全和布局

  ---

  Route 或Link嵌套在div等标签里，在跳转页面的同时会保留这Link部分跳转到旁边的Route部分

  ---

  三点运算符。。。 1、表示传入的参数（不管传入多少个）2、作为拓展运算符（或作为一些计算填充）

  21 react UI框架 --Ant Design(主要就是react的组件库