Retact 各种小姿势（小知识）

js命名规则：

只能由字母，数字，下划线和$符号组件

$count

第一个字符不能是数字 235count
命名不能用关键字和保留字 if,for,let

React 绑定this的正确方式 ？？？

1.<button onClick={ this.play.bind(this,参数1,参数2,参数n) } > 点击</button>

2. jsx中这样写：

   第一步： <button onClick={ this.play } > 点击</button>
   第二步：在constructor中定义

   this.play=this.play.bind(this,,参数1,参数2,参数n);
   

3.箭头函数写法

    <button onClick={ (e)=>{ this.play(e,参数1,参数2,参数n) } } > 点击</button>  

4.直接将函数写成箭头函数形式

  例如：

     <button onClick={ this.play } > 点击</button>


       play=(a,b,c) =>{
        console.log('balabalabal',this)
        // alert(c.target.innerHTML)
        }

有三种绑定方式：

定义初始数据的方式

1.在constrctor中定义

 constructor() {
     super();
     this.state={
         n:1
     }
 }
 2. state={
       n:1
   }

React快捷命令：

imr Import React
imrc Import React / Component
impt Import PropTypes
impc Import React / PureComponent
cc Class Component
ccc Class Component With Constructor
cdm componentDidMount
cwm componentWillMount
cwrp componentWillReceiveProps
scu shouldComponentUpdate
cwu componentWillUpdate
cdu componentDidUpdate
cwu componentWillUpdate

基于React的一款轮播插件的使用 (react-id-swiper)

文档：https://github.com/kidjp85/react-id-swiper
效果源码：http://kidjp85.github.io/react-id-swiper/

第一步：安装react-id-swiper

npm install react-id-swiper

第二步：创建一个轮播组件并引入react-id-swiper

 import Swiper from 'react-id-swiper';
import './indexStyle.css'

第三步：在render函数中写轮播代码

例如：

  class LunBoCom extends Component {
   state = {  }
   render() { 
    
    //轮播要配置的参数
    const params = {
        pagination: {
          el: '.swiper-pagination',
          type: 'bullets',
          clickable: true,
        },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        },
        spaceBetween: 30
      }

    return ( 
          
          //...params表示应用上面的轮播配置参数
        <Swiper { ...params }>
            <div>Slide 1</div>
            <div>Slide 2</div>
            <div>Slide 3</div>
            <div>Slide 4</div>
            <div>Slide 5</div>
        </Swiper>
    );
    }}

图片的引入

写到public目录中，可以通过绝对地址访问

children

相当于vue中的slot

在react中的用this.props.children来获取，并且children返回是一个数组

ref

用于访问dom操作，类似于vue的ref

用ref命名， <div ref="box">商品内容</div>
获取： this.refs.box