React-第一讲
2017-12-07 本文已影响31人
这个超人不会飞阿
1.组件(基本)
1.1定义组件
class 名字 extends React.Component{
render() {
return <span>111</span>;
}
}
1.2使用组件
就跟标签一样
ReactDOM.render(
<span>111</span>,
oDiv
);
ReactDOM.render(
<名字/>,
oDiv
);
2.组件(有属性)
<script type="text/babel">
class Comp extends React.Component {
render() {
// 组件传的属性全部都在props里面
return <span>我的名字是:{this.props.name},我今年{this.props.age}</span>;
}
}
window.onload = function() {
var oDiv = document.getElementById('div1');
ReactDOM.render(
<Comp name = "bin" age = "18" />,
oDiv
);
};
</script>
2.React-事件
React事件
属性--定死
状态--变得
constructor(){} 为构造函数.组件初始化的时候自动调用
-
设置状态2种方法
constructor里面-this.state={ value : ' ' }
如果在其他的方法里面--this.setState({});
-
事件大小写不能乱 例如(onChange onClick)
bin.png
-
绑定事件
onChange = {fn} 不对: fn是方法,不是函数
onChange = {this.fn} 不对:需要bind
onChange = {this.fn.bind(this)} 对
-
用到constructor的时候,必须用super
-
constructor(...args) ...args 是ES6可选参数
-
React 与 Angular 石川老师认为:他们2个在方向上就有区别,
Angular 特别擅长往网页输出东西 擅长接管UI ----有点霸道 比如JQ的ajax 原生的定时器都不行了 (就像和Angular结婚以后就不能看别的女孩)
React 特别擅长的是组件化 状态管理 ---比较开放的,你用了我以后还可以使用别的 甚至是Vue Angular
都兼容移动端
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
<script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
<title></title>
<script type="text/babel">
class Comp extends React.Component {
constructor(...args) {
super(...args); //超类, 其实就是父类的构造函数
this.state = {value : ''}
}
fn(ev) {
//借助ev帮我获取当前发生事件的对象
this.setState({
value : ev.target.value
});
}
render() {
return <div>
<input type="text" onChange = {this.fn.bind(this)} /> {/* 这里的onChange不是html里面一般的onChange,因为这里是JSX的语法 要编辑成js语法 所以要比JS能严格 */}
<span>{this.state.value}</span>
</div>;
}
}
window.onload = function() {
var oDiv = document.getElementById('div1');
ReactDOM.render(
<Comp />,
oDiv
);
};
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
Angular 与 React
相似之处: 都可以接管组件
不同之处: Angular一切的核心是数据 React一切的核心是状态
[组件-生存周期]
### componentWillMount() 创建之前
### conponentDidMount() 创建之后
### componentWillUpdate() 更新之前
### componentDidUpdate() 更新之后
### componentWillUnmount() 卸载之前
### 没有 componentDidUnmoubt
componentWillReceiveProps() 组件参数已经更新
表单原件的问题
1.用value时候不能直接用,改成defaultValue
2.用checked的时候不能直接用,改成defaultChecked
