搭建环境
- 安装node
- npm install bower -g 全局安装一个包管理器
插一句 bower info react 查询react 的版本信息 - bower install react#15.6.1 下载指定的版本
- bower install babel
开始写html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script type="text/javascript" src="bower_components/react/react.js"> </script>
<script type="text/javascript" src="bower_components/react/react-dom.js"> </script> //虚拟DOM
<script type="text/javascript" src="bower_components/babel/browser.js"> </script> // JSX 的语法
</head>
<body>
<div id="app"></div>
<script type="text/babel">
ReactDOM.render(
<h1>hellow react!</h1>,
document.getElementById('app')
)
</script>
</body>
</html>
react -dom => 提供了方法 ReactDOM.render(
组件（内容，元素），
放到哪
)
jsx => 支持style => 里面使用json
{{‘background’:‘red’}} 第一层括号表示告诉JSX我要使用js 语法，第二层括号则是json对象的壳子
事件
- 使用驼峰命名法，单词的首字母大写
onclick =>onClick
组件写法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script type="text/javascript" src="bower_components/react/react.js"> </script>
<script type="text/javascript" src="bower_components/react/react-dom.js"> </script>
<script type="text/javascript" src="bower_components/babel/browser.js"> </script>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
class Leo extends React.Component{
render(){
return <div>hello </div>
}
}
ReactDOM.render(
<Leo/>,app
)
</script>
</body>
</html>
书写形式
class 自定义名字 extends React.Component{
render(){
return (要渲染的内容)
}
}
注意 自己写的组件开头一定要大写
props
只能读 不能写
state - 状态可以改变
数据可以渲染
json 改变数据的方式 不会进行渲染
setState view层进行渲染
React 生命周期
1）componentWillMount 组件挂载前（组件渲染前）
1.找不到元素
2.属性、状态允许使用
2）componentDidMount 组件挂载后（组件渲染后）
1.可以找到元素
2.属性、状态允许使用
3）componentWillUpdate 组件更新前
4）componentDidUpdate 组件更新后
5）componentWillUnmount 组件卸载之前
关于事件冒泡的坑
react -
//return false;
//e.stopPropagation();
//e.cancelBubble = true;
//e.nativeEvent.cancelBubble = true;
都不好使
e <-react封装过的
nativeEvent 原生的事件对象
e.nativeEvent.stopImmediatePropagation()
停止立即的传播
975
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
