React学习(一)（论如何逼一个后端写逻辑的LowB成为全栈）

React学习(一)

---

经过稍微几天的对react的学习，ES6+nodejs的出现更是完全颠覆了老夫前端的认知，原来JavaScript也可以用来服务端开发了，而自己对前端的认识还停留在Bootstrap+jquery，感觉自己落后了好几个世纪，刚从农村出来一样。出于好奇和敬畏，去学习了下，并且在工作中主动承担了部分前端的工作(其实是一些边角料工作，前端不愿意做，没有kpi，但是对后端帮助很大的一些内部工具)，给项目组带来了一些方便吧。

1. 组件之间的参数传递通过props进行，ES6语法解构可以方便拿到传入组件的对应名字的数据

   class App extends React.Component {
       render(){
         // 获取传递进来的数据
         let {names , sex} = this.props;
         return (
             <div>
               {
                 names.map((item, index) => <Welcome key={index} name={item}/>
                           /*使用.map方法遍历时,需要加上key,即所遍历对象的index值*/
               }
               {
                 console.log(sex.some(s=>s.includes('男')))
               }
             </div>
         )
       }
     }
   let names = ['kobe', 'wade', 'anverson'];
   let sex = ['男','女'];
     
   ReactDOM.render(<App names={names} sex = {sex} />, document.getElementById('example'));
   

2. 自定义组件内部的内置方法中的this默认指向当前组件实例，而自定义的方法中的this默认指向null

class App extends React.Component {
      // 定义点击事件的方法
      handleClick(){
        console.log(this);// this指向null
        // 收集收据
        let value = this.refs.msg.value;
        // 页面提示数据
        alert(value);
        // 清空表单相内容
        this.refs.msg.value = '';
      }
      render(){
        return (
            <div>
              <input ref="msg" type="text" />
              <button onClick={this.handleClick}>提示输入数据</button> <!--此处this指向当前对象实例-->
              <input onBlur={this.handleBlur} type="text" placeholder="失去焦点提示数据" />
            </div>
        )
      }
    }

如果要修改自定义方法中的this,需要在组件App的构造函数中进行重新的绑定,

constructor(props){
        super(props);// 调用父类的构造方法
        // 修改this
        //用当前实例的this修改handleClick中的this
        this.handleClick = this.handleClick().bind(this);
      }

如果使用脚手架,则支持使用箭头函数进行自定义函数,即不需要再去修改this的绑定

handleClick = () => {
        console.log(this);// this指向null
        // 收集收据
        let value = this.refs.msg.value;
        // 页面提示数据
        alert(value);
        // 清空表单相内容
        this.refs.msg.value = '';
      }