特点:
- 声明式的设计。
- 高效,采用虚拟DOM来实现DOM的渲染,最大限度的减少DOM的操作。
- 灵活。跟其他库灵活搭配使用。
- JSX,在JS里面写HTML,JavaScript语法的拓展。
- 组件化,模块化。代码容易复用,大型项目喜欢。
- 单向数据流。没有实现数据的双向绑定。
创建项目
1、通过引入使用
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
2、通过react的脚手架,创建项目进行开发,部署。
- 安装脚手架Create React App
cnpm install -g create-react-app
- 创建项目
create-react-app demo01
React元素渲染
JSX允许的普通对象写法
let app = <App />;
let root = document.getElementById('root');
let h1 = <h1>helloworld</h1>;
注意:JSX元素对象,或者组件对象,必须只有1个根元素根节点
函数渲染实现时钟变换
function clock(){
let time = new Date().toLocaleTimeString()
let element = (
<div>
<h1>现在的时间是{time}</h1>
<h2>这是副标题</h2>
</div>
)
let root = document.querySelector('#root');
ReactDOM.render(element,root)
}
每秒更新
//间隔函数
setInterval(clock,1000)
函数式组件
//react函数式组件
function Clock(props){
return(
<div>
<h1>现在的时间是{props.date.toLocaleTimeString()}</h1>
<h2>这是函数式组件开发</h2>
</div>
)
}
function run(){
ReactDOM.render(
//在组件上设置属性
<Clock date={new Date()} />,
document.querySelector('#root')
)
}
setInterval(run,1000)