react

创建

• npm install -g create-react-app
• create-react-app projectName
• npm start
• npm run build

类继承组件

• import React,{Component} from 'react';
  import ReactDOM from 'react';
  class Helloworld extends Component{ //render进行new
  　　render(){
  　　　　return (<div></div>)
  　　}
  }
  ReactDOM.render(<Helloworld />,document.getElementById(#root))

函数式组件(无状态组件)

• 不会被实例化，性能大大提升
• 只能访问props不可访问外面的函数，this等
• 无state和生命周期时用这种方法

• import React from 'react'
  import ReactDOM from 'react-dom'
  function Helloworld(props){ //首字母大写,函数render调用
  　　return (<div>{props.name}</div>)
  }
  ReactDOM.render(<Helloworld name={'王'}/>,document.getElementById(#root))

属性（只读）

• 改变组件属性可以触发组件重新渲染
• 给属性设置默认设置值
• 给属性设置默认类型检查器（仅开发环境）

• import React from 'react'
  import ReactDOM from 'react-dom'
  import PropTypes from 'prop-types'

  function Helloworld(props){
  　　 render(){
           return (<div>Hello{props.name}<div>)
      }
  }
  Helloworld.defaultProps={
      name:'world',
  }
  Helloworld.propTypes={
  　　 name:PropTypes.string//string，array,bool,func,number,object,symbol
  　　 age: PropTypes.string.isRequired //必须填写
  }
  ReactDOM.render(<Helloworld name='WangLiqun' />)

• children属性

  • <UseList>
    <User></User>
    <User></User>
    </UserList>
    UserList内部this.props.children即数组

状态

• 初始化内部状态

  class MyComponent extends React.Component {
      constructor(props) {
          super(props);//调用父类constructor构造函数里面的语句
          this.state = {//constructor里面的属性直接在实例上，外面的函数等定义到原型上
              name: "WangLiqun"，
          }
          this.handleClick = this.handleClick.bind(this) //函数由原型变实例，this指向实例
      }//自动new一个实例，实例调用render生成
     handleClick(){}
  　　render(){return (<div></div>)}
  }
  
  类内部自定义函数this指向null
  render等系统自带的函数的this指向类的实例

• 异步的setState
  • 改变多次同一个state要用回调函数的方法·

生命周期

处理时间

• 驼峰命名法
• 异步勿使用
• this
  • .bind(this)//性能低
  • 箭头函数包装//性能低
  • constructor中bind//麻烦
  • 类的成员字段定义handle=e=>{巴拉巴拉}//可行，部分支持

 组件之间数据共享

• 状态提升
  • 子组件在事件中可以改变函数属性类型的props，即改变父组件的函数
    即父组件传递给你一个可以改变父组件state的函数

JSX

• 使用独立文件前端页面引用react,

• 表达式要用花括号{}

• 使用三元运算符代替if else样式：推荐内联style={mystyle} mystyle={css}

• 数组：自动展开数组元素标签
• class和for用className htmlFor代替

 

 

 

 

 

 react几点重点：

 jsx语法会自动把数组解析开

未完待续~~