React -基础与属性验证

React

起源：Facebook的内部项目，因为该公司对市场上所有 JavaScript MVC 框 架，都不满意，就决定自己写一套，用来架设Instagram 的网站。做出来以后，发现这套 东西很好用，就在2013年5月开源了。

1. 全局安装脚手架一次 cnpm install -g create-react-app
2. 创建项目 create-react-app myapp 启动项目 npm start
3. npx create-react-app my-app npx 命令，先检查局部中有没有create-react-app, 如果有， 跟上面一样创建和启动项 目 如果没有，再检查全局下有没有这个命令， 如果有， 跟上面一样创建和启动项目 如果都没有，自动局部安装 create-react-app ，然后跟上面一样创建和启动项目

特点

 1.声明式设计，高效灵活

 2.JSX -JavaScript语法扩展

 3.组件 - 容易复用

 4.单向相应的数据流  - React实现单向相应的数据流，从而减少重复代码，比传统数据绑定更简单

视图层的开发模式

 React 并不是完整的 MVC/MVVM 框架，它专注于提供清晰、简洁的 View（视图） 层解决方案。

JSX语法与组件

1.组件首字母大写，首字母小写会被认为是原生dom节点

2.组件最外层需要被一个标签包裹，不能有兄弟节点,标签可为空标签<></>,

 或 <Fragment>,需引入 import   { Fragment  }  from  'react'

3.return （加上小括号，可以回车）

4.组件可以嵌套

5.组件写法有函数式和Class写法

6.组件内JS写法和注释需加 { }

7.样式

• class => className , for => htmlFor (label)
• 推荐行内样式，ge: font-size => fontSize
  8.事件
• 箭头函数(原生)
• 改变this指向
  obj.getDate.call(obj1, ‘a’,‘b’,‘c’) - - 改变this指向，立即执行方法
  obj.getDate.apply(obj1, [‘a’,‘b’,‘c’]) - - 改变this指向，立即执行方法
  obj.getDate.bind(obj1, ‘a’,‘b’,‘c’)() - - 改变this指向，手动执行方法
• 与普通事件的区别
  onClick={this.handleClick.bind(this)}
  - - 改变this指向，handleClick（）{}
  onClick={ () =>this.handleDel(item) }
  - - 不改变this指向，handleDel=(item)=>{}

9.ref

• a. 给标签设置ref=“username”
  • 通过这个获取this.refs.username ,ref可以获取到应用的真实dom
• b. 给组件设置ref=“username”
• 通过这个获取this.refs.username ,ref可以获取到组件对象
• c. 给标签设置 ref={(el)=>{myele=ele;}}
  • 访问myele

State 注意点

• 不能直接修改 State，直接修改代码不会重新渲染组件
  • 可通过 concat() 、slice()、[…array] 赋值于一个新数组然后操作
  • 使用 this.setState 构造函数给 this.state 赋值
• setState 的赋值是异步的
  • 解决方法：
    • 可以让setState() 接收一个函数而不是对象
    • 函数有两个参数，上一个state为第一个参数，此次更新的为第二个参数
      this.setState((state, props) => ({
      counter: state.counter + props.increment
      }));

propType 属性验证

• 引入: improt PropTypes from ‘prop-types’

  -没有传递该属性时的默认值            // ES7使用实例
  static defaultProps = {
      name: 'defaul'
  }
  -传递该属性时规定属性值
  static propTypes = {
      name: PropTypes.string
  }
  -没有传递该属性时的默认值            // Class定义中使用实例
  ClassName.defaultProps = {
      name: 'defaul'
  }
  
  -使用 isRequired 设置属性为必须传递的值
  static propTypes = {
      name: PropTypes.string.isRequired
  }
  
  -arrayOf和objectOf多重嵌套类型检测
  static propTypes = {
      todoList: PropTypes.arrayOf(PropTypes.shape({
          id: PropTypes.string.isRequired,
          text:PropTypes.string
      }))
  }
  
  应用组件：<Child1 name={12345}/>
  子组件接收：class中直接接收 this.props.name
             function(props)传入props参数接收
  

  属性类型：array、bool、func、number、object、string、symbol

安装脚手架

安装 create-react-app

• npm i -g create-react-app

安装好了之后，看一下版本

• create-react-app --version

安装好了之后创建目录

• create–react-app my-app