https://facebook.github.io/react/
JavaScript库，只为构建用户界面，以组件为基础，写一次就可以在多处运行
React特性
- jsx--使用简单
- 单向数据流--数据绑定简单
- 虚拟dom--加快程序的运行效率
- 组件化开发
- 局限性：如何在子组件里操作父组件的数据；
安装
- node_modules
- 创建package.json (npm init)
- npm install --save react react-dom package.json 里面的name不能和react一样
- console.log(window); 搜索react可以很便捷的看到引入react文件后给我添加了哪些属性和方法
一个简单的例子
<!DOCTYPE html>
<html>
<head>
<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>
<script src="../build/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
</script>
</body>
</html>
-
首先，注意到最后一个script标签对的type属性是"text/babel"，这是因为react独有的JSX语法，与JavaScript不兼容。凡是使用JSX语法的地方，都要加type="text/babel"。
-
上面的代码一共引用了三个库，它们必须首先加载，react.js是react的核心库，react-dom.js是提供与DOM相关的功能，browser.min.js的作用是将JSX语法转为JavaScript语法。实际上线的时候，应该放在服务器上完成。
$ babel src --out-dir build- 这句代码可以将src子目录的 js文件进行语法转换，转码后的文件全部放在 build子目录。
一、ReactDOM.render()
- 是react最基本的方法，用于将模版转为html语言，并插入指定的DOM节点中。
二、JSX语法
-
JSX --模版引擎 和ejs/jade一样
-
上面的代码中，html直接写在了JavaScript语言中，不加任何引号，这就是JSX语法，它允许这样的混写。
var names=['zhangsan','lisi','wangwu'];
ReactDOM.render(
<div>
{
names.map(function(name){
return <div> hello {name} !</div>
})
}
</div>,
document.getElementById('example')
); -
上面这段代码，体现了JSX基本的语法规则：遇到html标签(以'<'开头)就用html规则解析；遇到代码块(以'{'开头)就以JavaScript规则解析。
-
JSX允许在模版中插入JavaScript变量，如果这个变量是数组，则会展开这个数组的所有成员。
var arr=[<h1>hello react!</h1>,<h3>react is awesome!</h3>];
ReactDOM.render(
<div>{arr}</div>,
document.getElementById("#example")
);
三、组件
-
组件可以让你把UI分割成独立的、可重用的部件,单独地考虑每一块。
-
react允许将代码封装成组件，然后像插入一个普通标签一样，把这个组件插入到页面中。React.createClass()用于生成一个组件类
-
在使用已经定义好的组件时，可以传入属性，并且可以在组件的内部获取到传进来的值：
this.props.属性名;
不能在组件内部更改传进来的属性的值。 -
arr.map() map--映射
var arr=[1,2,3,45,6];
arr.map(function(a,b,c){ //元素，下标，值
console.log(a)
})
example:
class Map extends React.Component{
render(){
return (
<div>
{(this.props.children).map(function(a,b){
return <li key={b}>{a}</li>
})}
</div>
)
}
}
ReactDOM.render(<Map><span>arr.map</span><span>map</span><span>Map</span></Map>,document.getElementById("example")) -
渲染的组件必须是一个完整的结构，只能有一个根元素
class Abc extends React.Component{
render(){
return (
<ul>
<li></li>
<div></div>
</ul>
)
}
} -
★ 想要在组件内部改变状态 首先设置初始值state={}; 使用方法setState 可以：
-
重新设置 state的值
-
并重新进行渲染
class State extends React.Component{}
-
-
生命周期
componentWillMount(){console.log('准备渲染')}
componentDidMount(){console.log('渲染完毕')}componentWillUpdate(){console.log('即将更新')} componentDidUpdate(){console.log('更新完毕')} shouldComponentUpdate(){} //确定要更新？ 返回一个布尔值 componentWillReceiveProps(){console.log('元素的属性即将发生更改')} render(){console.log('正在渲染')} -
组件---流程是最重要的 思想最重要 但在技术角度来说是最不重要的 重在逻辑
网友评论