react-app开发中的一些不完整积累

react（react-app）开发中的一些不完整积累

本文主要适用于react+node开发分享

---

npm创建和前期准备

• cmd预备新建文件
• 检查npm、node 版本 Npm/node -v
  如果成功显示版本即为安装成功
• 新建一个项目
  • 先install Npm install -g create-react-app
  • 创建新项目 Create-react-app 项目名
• Npm报错 npm install react-scripts
• 分享一些node相关教程

react开发中的一些问题

• 在一次开发中发现从src文件调用其他文件的图片显示不出来的问题，后来查了一下是src引用外部目录文件冲突的问题，解决方法如下：
  当然最笨拙的方法也是最直接的方法是把调用文件放到src里，但第一次遇到这个问题也是挺奇怪。

• 在前端一挂载就显示、调用的需要用生命周期函数，主要用的比较多的是 componentDidMount(){} ，这个函数里写的是组件渲染完成后调用的内容，详情参考react的生命周期函数
  等博客，按需自取~

react前后端逻辑

• 前端挂载后 向后端请求数据
  通常会经过store来过渡前后端数据，前端先去向store请求，store向后端请求。
• 后端获取请求 调用对应的数据库方法
• 访问数据库
• 前端将数据遍历显示

react一些用法及注意事项

• react可以自定义组件+实现组件复用
• 常用：定义Page组件，在jsx里面像调用html一样
• react组件是树形结构，首字母大写
• 标签形式传递于父子组件中，this.props… 接收
• 父组件传递过来的子组件要修改 this…bind(this)
• 子组件调用父组件方法：父组件传递方法，子组件调用方法来改数据
• 单向数据流：父给子传递数据，子不能直接来改父传来的数据
• 属性props可以向使用html的attr一样使用属性，就像下面img的src一样，如果需要传递动态属性，使用{}，多个属性，使用展开运算符
• 两个转换,class–>className for–>htmlFor 因为class和for是javascript关键字，所以这里需要用转换之后名称
• react对元素属性做了校验，如果在原生属性上使用此元素不支持的属性，则不能编译成功。必须使用data-前缀
• 如果动态的插入html元素,react出于安全性考虑会自动帮我们转义。所以一定要动态的插入元素的话，使用dangerouslySetInnerHTML
• 真实开发中不要在render函数里面去更改state

---

菜鸡学习积累，如果错误欢迎大佬指正