【React】
React(也被称为React.js或ReactJS)是一个用于构建用户界面的JavaScript库。它由Facebook和一个由个人开发者和公司组成的社区来维护。
React可以作为开发单页或移动应用的基础。然而,React只关注向DOM渲染数据,因此创建React应用通常需要使用额外的库来进行状态管理和路由,Redux和React Router分别是这类库的例子。
基本用法
下面是一个简单的React在HTML中使用JSX和JavaScript的例子。
<div id="myReactApp"></div>
<script type="text/babel">
function Greeter(props) {
return <h1>{props.greeting}</h1>;
}文章来源:https://www.toymoban.com/news/detail-486222.html
var App = <Greeter greeting="Hello World!" />;
ReactDOM.render(App, document.getElementById("myReactApp"));
</script>
Greeter函数是一个React组件,它接受一个属性问候语。变量App是Greeter组件的一个实例,其中问候语属性被设置为 "Hello World!"。然后,ReactDOM.render方法将我们的Greeter组件渲染在DOM元素(id为 myReactApp)中。
在web浏览器中显示时,结果将是:
<div id="myReactApp">
<h1>Hello World!</h1>
</div>
显著特点
组件化
React代码由称为组件的实体组成。组件可以使用React DOM库渲染到DOM中的一个特定元素。当渲染一个组件时,可以传入被称为 "props "的值。
ReactDOM.render(<Greeter greeting="Hello World!" />, document.getElementById('myReactApp'));
React中声明组件的两种主要方式是通过功能函数组件和基于类的组件。
功能函数组件
功能组件是用一个函数声明,用来返回一些JSX。
const Greeting = (props) => <div>Hello, {props.name}!</div>;
类组件
基于类的组件是使用ES6类来声明的。它们也被称为 "有状态 "组件,因为它们的状态可以在整个组件中保持,并且可以通过props传递给子组件。
class ParentComponent extends React.Component {
state = { color: 'green' };
render() {
return (
<ChildComponent color={this.state.color} />
);
}
}文章来源地址https://www.toymoban.com/news/detail-486222.html
到了这里,关于三大前端技术(React,Vue,Angular)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!