标签：注意 tin render 网页 updating ati 方法 star 语言
react是用于构建用户界面的JavaScript库
react主要用于构建ui，很多人认为react是mvc框架中的v
使用react需要引入三个库：react.min.js、react-dom.min.js和babel.min.js
react.min.js - react的核心库
react-dom.min.js - 提供与DOM相关的功能
babel.min.js - babel可以将es6代码转为es5代码，这样我们技能在目前不支持es6游览器上执行react代码。
下面是通过npm安装react
npm install -g cnpm --registry=https://registry.npm.taobao.org npm config set registry https://registry.npm.taobao.org cnpm install [name] /
通过create-react-app快速构建react开发环境
create-react-app是来自于Facebook，通过该命令我们无需配置就能快速构建react开发环境。
create-react-app来自创建项目基于webpack
执行以下命令创建项目：
cnpm install -g create-react-app create-react-app my-app cd my-app/ npm start
执行以上命令后就可以用http://localhost:3000在游览器上打开一个网页，项目文件夹中也会自动创建一个my-app的文件出来。
jsx即JavaScript xml,是js中的一种热语言，在编译的时候要先把jsx编译成js,再进行运行。
ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById(‘example‘) );
<body> <div id="example"></div> <script type="text/babel"> var HelloMessage = React.createClass({ render: function() { return <h1>Hello World！</h1>; } }); ReactDOM.render( <HelloMessage />, document.getElementById(‘example‘) ); </script> </body>
上面的代码封装了一个名为HelloMessage的组件
React.createClass 方法用于生成一组件
<HelloMessage /> 实例组件类并输出信息。
注意：原生 HTML 元素名以小写字母开头，而自定义的 React 类名以大写字母开头，比如 HelloMessage 不能写成 helloMessage。除此之外还需要注意组件类只能包含一个顶层标签，否则也会报错。
可以使用this.props向组建传递参数
<body> <div id="example"></div> <script type="text/babel"> var HelloMessage = React.createClass({ render: function() { return <h1>Hello {this.props.name}</h1>; } }); ReactDOM.render( <HelloMessage name="R" />, document.getElementById(‘example‘) ); </script> </body>
state和props的住要区别是props是不可改变的，而state是可以根据用户来改变的。
组件的生命周期分为三个状态
Mounting - 已插入真实的dom
Updating - 正在被重新渲染
Unmounting - 已移除真实的dom
标签：注意 tin render 网页 updating ati 方法 star 语言
原文地址：https://www.cnblogs.com/leilei0327/p/8992348.html
