新人写react项目时需要注意的那些事(连载中)

0、react并不是双向绑定

三大框架对比

所以类似input之类的标签没有类似vue的v-model，必须手动更新值

<input type="text" value={this.state.newToDoList} onChange={(e)=>this.inputTextChange(e)} />

inputTextChange(e){
    this.setState({
        newToDoList: e.target.value
    })
}

1、事件绑定和传参

class中默认是没有this这个对象的。所以react中的事件绑定和传参与vue有很大不同。

export default class Test extends React.Component {

    handleOk = (param) => {
        // 如果有参数的话则输出参数
        console.log(param);
    }

    render() {
        return (
            <div>
                <Button onClick={this.handleClick}>Open</Button>
                <Button onClick={() => this.handleClick('showModal1')}>Open</Button>
            </div>
        );
    }
}

2、render根节点

和vue一样，react组件最外面也必须包裹一个标签，最常见的是包裹div或者span，不过进行不必要的嵌套，无形中会增加了浏览器的渲染压力。所以可以使用React 16为我们提供的Fragments。

import React, { Fragment } from 'react';

export default class App extends React.Component {
  render() {
    return (
      <Fragment>
        <ul>
          <li>a</li>
          <li>a</li>
          <li>a</li>
          <li>a</li>
          <li>a</li>
        </ul>
      </Fragment>
    )
  }
}

3、组件命令规范

react里面import或者export的组件的名字首字母必须大写，否则会报错The tag <globalStyle> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.
组件命名示例GlobalStyle

4、react img标签引入图片的几种方式

import checkedImg from 'assets/images/checked.svg';

<img src={checkedImg} alt="" height="40" />
<img src={require('./../assets/images/checked.svg')} />