react笔记记录

Posted 2020-09-06 葫芦娃~葫芦娃

React全家桶：
1.react库主题；
2.webpack 自动化的一个构架工具（grunt gulp);
3.flex 布局用的；
4.redux view层用，把特别复杂的html页面分成一部分一部分的；
5.babel:编译器；

 

jsx语法： 不能直接用，要编译；
它就相当于js编译器，把普通的js转成支持es6的语法规则；
1、增强版的js语法，
babel：编译器；

注意：有且只有一个一个父元素；（顶元素）

第一个react；

ReactDOM.render();
render有2个参数，一个参数是渲染的内容；第二个参数是渲染到哪个位置(标签内)

react最强大的地方在于：
1、组件；
2、状态；

react的组件；一个组件就是一个class

<script type="text/babel">
class Comp extends React.Component{ //创建一个类：
render(){
return <span>qqaazz</span>;
}
}
window.onload = function(){
var odiv = document.getElementById(‘oDiv‘);
ReactDOM.render(
<Comp/>,
odiv
);
}
</script>

创建一个类：
一个组件就相当于是一个自定义标签或者是一个class；
在window.onload方法中渲染comp这个组件，组件都是可见的，因此，组件内必须得有一个方法，叫做render,
render方法的作用就是：当我要渲染组件的时候，组件内的render方法就要把渲染的内容返回回来；上面的代码就渲染并返回了一个span；
直接渲染组件就可以了，组件内部的方法体中写具体渲染的内容

作为一个组件，必须要在页面上被渲染出来；

1、定义一个组件：
class 名字 extends React.Component{
//至少有一个方法（渲染的内容）
render(){
return //返回渲染的内容；
}

}
2、使用这个组件
//就跟标签一样用；
//ReactDOM.render(参数1，参数2)；
ReactDOM.render(
<Comp/>,
odiv
);



组件是可以有属性的：

用法：
<Comp name="zhangsan"/>
return <span>{this.props.name}</span>;

{} 模板字符串 在这里放你的变量
props 我们传的所有的属性都在props里面，用的时候可写成：props.name；

当传2个参数时，这样写：
<Comp name = "zhangsan" age="26"/>,
return <span>{this.props.name},{this.props.age}</span>; 都写在span内。用2个{}分开写；

react事件；onChange onClick

状态：可以变的，不固定；
constructor(...args){
super(...args);//super()代表的是超类父类构造函数，先完成父类的函数构造，然后才能处理其他构造函数
this.state ={value:‘‘};//初始化state
}
setState(); 设置状态
this.state.value 获取状态
this.setState({
value:e.target.value
});

state不可能只是一个数据，所以他应该是个对象，对象包含很多个state

绑定事件：
事件函数
fn(e){//处理事件所用的函数
this.setState({
value:e.target.value
});
}

<input type="text" onChange = {this.fn.bind(this)}/>