学习react入门（一）

因为阿里的iceworks大部分物料源是用react来做的，目前我一般用vue的物料源做开发，简单用起来也很方便，不过为了vue放弃那么多的官方提供的物料源着实有点可惜，所以就开始接触学习一下react，然后再结合iceworks里面的物料源的代码进行更加深入的学习，当然对RN也很感兴趣。

1.基础
其他的不用晓得，先要知道react的jsx语法，它是一种 JavaScript 的语法扩展，HTML 语言直接写在 JavaScript 语言之中，不加任何引号，这就是 JSX 的语法，它允许 HTML 与 JavaScript 的混写， 我们推荐在 React 中使用 JSX 来描述用户界面。

var myDivElement = <div className="foo" />;
ReactDOM.render(myDivElement, document.getElementById('example'));

React.render 是 React 的最基本方法，用于将模板转为 HTML 语言，并插入指定的 DOM 节点。
注意：render里面第二个参数必须使用JavaScript原生的getElementByID方法，不能使用jQuery来选取DOM节点。

2.组件
1）基础组件用法

import React, { Component } from 'react';
class example extends Component{
  render(){
    return(
      <div></div>
    )
  }
}
export default example

有其他框架基础的应该一下就懂了，引用它

import Example form './example'

然后直接使用这个标签就可以。注意：1.创建的组件名称首字母必须大写 2.为元素添加css的class时，要用className

2）组件的数据

class example extends Component{
  constructor(props) {
    super(props);
    this.state = {
      firstdata:'小蜜'
    };
  }
  render(){
    return(
      <div>
        <div className="App">我的名字是{this.state.firstdata}</div>
      </div>
    )
  }
}
export default example

创建一个名称扩展为 React.Component 的 ES6 类，也就是组件的数据存储，我们在class里写一个构造器，数据放在this.state里，在 render() 方法中使用 this.state 来获取或者修改这个数据

3）修改组件中的数据

React 事件绑定属性的命名采用驼峰式写法，而不是小写。
如果采用 JSX 的语法你需要传入一个函数作为事件处理函数，而不是一个字符串(DOM 元素的写法)

class example extends Component{
  constructor(props) {
    super(props);
    this.state = {
      firstdata:'小蜜'
    };
  }
  command(){
    this.setState({
      firstdata:'小可爱'
    })
  }
  render(){
    return(
      <div>
        <div className="App">我的名字是{this.state.firstdata}</div>
        <button onClick={this.command.bind(this)}>修改</button>
      </div>
    )
  }
}

向事件处理程序传递参数：

<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>

注意传递参数的位置
1.参数 e 作为 React 事件对象将会被作为第二个参数进行传递。
2.通过 bind 方式向监听函数传参，在类组件中定义的监听函数，事件对象 e 要排在所传递参数的后面
事件：this.handleclick.bind(this，要传的参数)
函数：handleclick(传过来的参数，event)
引用菜鸟教程的一个例子，就不用自己写了

class Popper extends React.Component{
    constructor(){
        super();
        this.state = {name:'Hello world!'};
    }
    
    preventPop(name, e){    //事件对象e要放在最后
        e.preventDefault();
        alert(name);
    }
    
    render(){
        return (
            <div>
                <p>hello</p>
                {/* 通过 bind() 方法传递参数。 */}
                <a href="https://reactjs.org" onClick={this.preventPop.bind(this,this.state.name)}>Click</a>
            </div>
        );
    }
}

4）父子组件传参
state 和 props 主要的区别在于 props 是不可变的，而 state 可以根据与用户交互来改变。这就是为什么有些容器组件需要定义 state 来更新和修改数据。 而子组件只能通过 props 来传递数据。
父组件

<Example name={this.state.firstdata}></Example>

子组件接收一下

class example extends Component{
  render(){
    return(
      <div>
        {this.props.name}
      </div>
    )
  }
}

总之就是：在父组件中设置 state， 并通过在子组件上使用 props 将其传递到子组件上。