react 的what,when, where
react是一个用来构建用户界面的javascript库,起源于Facebook内部,2013年5月开源,目前最新的版本是v16.6.0,最大的亮点是JSX,return里的内容看起来就像html
class Header extends React.Component {
render() {
return (
<h1>Hello World</h1>
);
}
}
注意:由于 JSX 就是 JavaScript,一些标识符像 class 和 for 不建议作为 XML 属性名。作为替代,React DOM 使用 className 和 htmlFor 来做对应的属性。
react已经是个发展了些年的青壮年了,可以与市面上很多库或者框架配合一起用。在react中经常提到的是一个组件的概念,一般我们把一些常用到的代码片段抽象出来,提高代码的复用。
它的发展历史可以在github上追溯到。
如果对作者的设计思想有兴趣,可以直接看看这个
使用
比较古老的方法是,在Html里引入两个库JS,然后通过render方法渲染页面
<script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script> // React的核心库,用于创建UI
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script> // 提供与DOM相关的功能。用于将创建的UI渲染到浏览器中
如果不用JSX,是这样的
const e = React.createElement;
// Display a "Like" <button>
return e(
'button',
{ onClick: () => this.setState({ liked: true }) },
'Like'
);
如果使用JSX,则需要再引一个JS库
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
接下来在业务逻辑的script标签中加上type="text/babel",然后就可以用JSX语法了
// Display a "Like" <button>
return (
<button onClick={() => this.setState({ liked: true })}>
Like
</button>
);
这种应用方式不得不说太简单了,一般来说,会配合webpack,es6,redux一起使用,详细可以参考这个教程
一些杂七杂八的工具
-
react-tools
从开源时就有的工具,npm -g安装了之后就可以运行命令把jsx编译成jsjsx --watch src/ build/
-
react-native-debugger / react-devtools
表面上看都是调试器,可以调试react & react native,一个是黑色的,一个是白色的,建议还是装个react-native-debugger,因为react-devtools有某些依赖很难解决 -
redux Redux 是 JavaScript 状态容器,提供可预测化的状态管理,大小大概是2KB
-
React Developer Tools / Redux DevTools
这两个都是浏览器插件,redux就是保存一些组件之间通信相关state的。
面试常考点
-
为啥组件名是大写的?
为了跟html标签区别开,因为render函数里的jsx也可以return像h1、h2这样的标签render() { return ( <div> <Clock /> <h1>Hello, world!</h1> <h2>现在是 {this.state.date.toLocaleTimeString()}.</h2> </div> ); }