react入门

vue和react区别

整理下react中常见的坑

开发环境搭建

基于create-react-app的再配置

报错

PS C:\Users\lijiawei\Desktop> npx create-react-app my-app
npm ERR! code ENOLOCAL
npm ERR! Could not install from "Files\nodejs\node_cache\_npx\68292" as it does not contain a package.json file.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Program Files\nodejs\node_cache\_logs\2018-12-17T07_15_39_571Z-debug.log

解决方法

npm install -g create-react-app 
create-react-app myApp

React中组件的语法

函数式组件和类组件

• 函数式

function Welcome(props) {
  return 
Hello, {props.name}
;
}

• 类组件

class Welcome extends React.Component {
  render() {
    return 
Hello, {this.props.name}
;
  }
}

两种写法

JSX语法

自定义的组件开头要大写

代码优化

1、在构造函数中做好this指向的改变
下面就不用.bind(this)
可以改变代码的执行性能

2、解决render函数中代码过长

image

Fragment（片段）

react 的特点

React设计思想

• 声明式开发
  • 对应的就是命令式（编程式）的开发，例如jQuery就是一个操作DOM的命令式开发。而React这是好比我们在设计一张大楼的图纸，我们只管图纸设计，怎么施工就交给React。
  • 编程式实现需要以具体的代码表达在哪里（where），做什么（what），如何实现（how）；而声明式只需要声明在哪里（where），做什么（what），而无需关心如何实现（how）
• 可以与其他框架并存
• 组件化
• 单项数据流
  • 例如父组件中有5个子组件共同引用了一个数据源，当5个子组件都有修改数据源的操作后，如果出现bug，要精确定位bug很困难，必须一个一个组件找
  • 如果真要改就统一在父组件中改
• 视图层框架
• 函数式编程
  • React代码基本上都是一个个函数的写法
  • 优势1：易于维护，当一个函数比较大时，可以拆分，每个函数各司其职
  • 优势2：面试测试的开发流程，如果项目代码都是些函数，我们就可以很方便的测试其输出是不是符合我们预期的值