React之入门，配置（一）

安装：

在哪里都可以，是全局安装
$  npm install -g create-react-app
进入到你要创建的文件夹，创建myreact，过程有点慢，可以用淘宝镜像
$ create-react-app myreact
打开项目：
$ npm start

image.png

文件结构：

image.png

与vue不同，react不能自动热加载，需要你刷新浏览器
【React DOM 使用 camelCase 小驼峰命名 来定义属性的名称，而不是使用 HTML 的属性名称，例如，class`变成了 className，而 tabindex则对应着tabIndex】

【React 元素都是immutable 不可变的。当元素被创建之后，你是无法改变其内容或属性的。一个元素就好像是动画里的一帧，它代表应用界面在某一时间点的样子
】

组件：
有俩种声明方法：

function Testdiv() {
    return <div>测试div</div>
}

class Testdiv extends Component{
  render(){
    return(
        <div>测试div</div>
    )
  }
}

那这两种声明方法有什么区别呢？
function：

1  function component更易于编写阅读和测试
2  代码量更少，上手容易
3  因为没有状态，可以更好的实现容器和表现的分离，可以只负责表现层的逻辑，不用考虑因为复杂的逻辑去改变状态从而带来的麻烦，有利于代码复用。
4  react团队提倡使用

class：

1  虽然function component 有很多好处，但是有些时候class component 还是不可替代的。
2  当需要实现一些容器组件的时候，需要改变内部状态来实现自组件的改变的时候。
3  当需要用到生命周期钩子函数实现一些功能的时候
4  当我们需要提升性能时，性能是一个很重要的问题，有些时候我们需要减少组件的渲染次数，我们就需要在组件内部用shouldComponentUpdate 方法来去判断，或者继承React.PureComponent 类（自动调用shouldComponentUpdate）来实现state和props的浅比较进行判断组件是否重新渲染。

【注意】方法名首写字母一定要大写

image.png

react生命周期：
比较常用的应该是：
componentDidMount : 在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来进行访问。 如果你想和其他JavaScript框架一起使用，可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异步操作阻塞UI)。
componentWillMount 在渲染前调用,在客户端也在服务端。

我们来跑一个显示时间的定时器：

class Testdiv extends Component{
  constructor(props) {
      super(props);
      this.state = {date: new Date(),aaa:'1'};
  }
    componentDidMount(){
      var this_ = this;
      this.timer = setInterval(function () {
          this_.setState({
              date:new Date()
          })
      },1000);
    }

    tick(){
      this.setState({
          date:new Date()
      })
    }
    componentWillUnmount() {
        clearInterval(this.timer);
    }

    render(){
      return(
          <div>{this.state.date.toLocaleTimeString()}</div>
      )
    }
}

constructor的作用：

image.png

这里的this指的是？

image.png

指的是Testdiv本身

扩展：es6箭头函数

 componentDidMount(){
      this.timer = setInterval(()=>this.tick(),1000);
      console.log(this);
    }

为什么箭头函数就可以直接在this函数中接着写this不报错呢？
箭头函数的this定义：箭头函数的this是在定义函数时绑定的，不是在执行过程中绑定的。简单的说，函数在定义时，this就继承了定义函数的对象。
https://www.jianshu.com/p/c1ee12a328d2

写一个类似toggle的东西

image.png

class ToggleDiv extends Component{
    constructor(props) {
        super(props);
        this.state = {istoggle :true};
        this.handleClick = this.handleClick.bind(this);
    }
    handleClick(){
      this.setState((prevState)=>({istoggle:!prevState.istoggle}));
    }
    render(){
      return(
              <button onClick={this.handleClick}>状态是：{this.state.istoggle?'on':'off'}</button>
          )
    }
}

这里要注意的是：
1.方法名称需要小驼峰式写法
2.handleClick()方法中使用了箭头函数，prevState作为一个参数表示该类的state状态，叫什么都可以。
箭头函数等同于：

  handleClick(){
        this.setState(function () {
            return {istoggle:!this.state.istoggle}
        })
    }

3.this.handleClick = this.handleClick.bind(this);这句话一定要加【属性初始化器语法】
否则handleClick方法没有主体，handleClick（）中的this为：undefined
如果这句话让你很烦，也可以用箭头函数这么写，但是建议用属性初始化器语法写，大神就是那么写的：

 handleClick = ()=>{
        this.setState(function () {
            return {istoggle:!this.state.istoggle}
        })
    }

函数传参：

class ToggleDiv extends Component{
    constructor(props) {
        super(props);
        this.state = {istoggle :true};
        this.handleClick = this.handleClick.bind(this);
    }
    handleClick(name,some,e){ //e要放到最后面
     console.log(name);
      this.setState((state_)=>({istoggle:!state_.istoggle}));
    }
    render(){
      return(
              <button onClick={this.handleClick.bind(this,this.state.istoggle,'ww')}>状态是：{this.state.istoggle?'on':'off'}</button>
          )
    }
}

关于react开发设计，很有用https://blog.csdn.net/yisuowushinian/article/details/79045058