React（一）

2018年11月27日

老实说虽然第一天学了很多东西，但是写案例的时候却完全不会用。

0.所用到的依赖包

涉及一些es6的语法，所以用到了一个babel的包，记得在Script标签中引入的时候把标签type修改为text/babel

npm i -S react react-dom @babel/standalone

1.数据绑定

在接触了一点点Vue后这玩意儿也算是老朋友了

React使用ReactDOM.render()方法实现模块的替换

<div id="app"></div>

<script type="text/babel">
  ReactDOM.render(<h1>hello,React</h1>,document.getElementById("app"));
</script>

复杂一点的模板也算一样，不过有几个注意点

• 单标签需要使用/结束，如<input />

• class等关键字要替换成新的className等，这一点在执行后页面会给出提示

• 关于数据绑定，Vue使用{{}}，这里使用{}

• 只能存在一个子标签，就是说再多标签，也要弄个<div>套起来

• 标签不要用引号，直接写

<div>
    <h1>Hello,{user.name}</h1>
    <p className="name" title={user.title}>name:{user.name}</p>
    <p>gender:{user.gender===0?'男':'女'}</p>
    <p>age:{user.age}</p>
</div>

2.遍历输出

万变不离其宗嘛，反正就是对数据遍历然后返回标签到数组里

var todoList=[];
//-----------------------------------------------------------------------------------------------
//forEach方式
hero.forEach(function (item){
    todoList.push(<li key={item.id}>{item.name}:{item.type}</li>)
})
//-----------------------------------------------------------------------------------------------
//Map方式
var todoList=hero.map(function (item) {
    return (<li key={item.id}>{item.name}:{item.type}</li>)
});

 var element=(
    <ul>
        {todoList}
    </ul>
);
ReactDOM.render(element,document.getElementById("app"));

3.事件绑定

这个挺简单的，就几个规则

• 事件名改为驼峰命名了，如onclick==>onClick，记不住也无所谓，反正页面里也会给提示

• 事件名用{}不要用引号

const element=(
    <button onClick={()=>{alert('hello React!')}}>click me</button>
);
ReactDOM.render(element,document.getElementById("app"));

4.es6类与继承

这次是真的继承了，不是用原型链模拟了= =，和Java没啥太大区别，用constructor申明构造函数，老规矩，重新构造函数一定要调用父类的构造函数，也就是super()

class Person{
    constructor(name){
    this.name=name;
    }

    toString(){
        console.log(" height:"+this.height);
        }
    }

class Student extends Person{
    constructor(nameschool){
        super(name);
        this.school=school;
        }
    start(){
        console.log("name:"+this.name+" starting...");
         }
    }
var stu=new Student("小红","北大青鸟");
stu.start();
stu.toString();

5.利用Class生成组件

利用class生成组件要继承自React.component类，需要实现数据修改的话就要重新构造函数（简书这个代码缩减有点蛋疼。。。）

class MyHeader extends React.Component{
    constructor(){
        super();
        this.state={
            message:"hello,world!"
        };
    }
    render(){
        return(
              <div className='myHeader'>
                <h1>{this.state.message}</h1> 
                <button onClick={this.handleChange.bind(this)}>change</button>                        
            </div>
            );
        }
    handleChange(){
        this.setState({
            message:"hello,react!"
            })
        }
    }
const element=<MyHeader />
ReactDOM.render(element,document.getElementById("app"));

大致就这些吧，明天好好写几个案例熟练一下再说= =！