前端开发中需要掌握的开发框架React _框架

React 简介

文章插图

React 基本使用

<div id="test"></div><script type="text/JAVAscript" src=https://www.isolves.com/it/cxkf/kj/2021-11-30/"../js/react.development.js">

JSX 的基本使用React 使用 JSX 来替代常规的 JavaScript 。
JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。
我们不需要一定使用 JSX，但它有以下优点：
JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。它是类型安全的，在编译过程中就能发现错误。使用 JSX 编写模板更加简单快速。例如:
var myDivElement = <div className="foo" />;ReactDOM.render(myDivElement, document.getElementById('example'));

<div id="test"></div><div id="test2"></div><script type="text/javascript" src=https://www.isolves.com/it/cxkf/kj/2021-11-30/"../js/react.development.js">

React 三大组件(state,props,refs)State 组件React 把组件看成是一个状态机（State machines）。通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。
React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面（不要操作 DOM）。
以下实例创建一个名称扩展为 React.Component 的 ES6 类，在 render() 方法中使用 this.state 来修改当前的时间。
添加一个类构造函数来初始化状态 this.state，类组件应始终使用 props 调用基础构造函数。

class Clock extends React.Component {constructor(props) {super(props);this.state = {date: new Date()};}render() {return (<div><h1>Hello, world!</h1><h2>现在是 {this.state.date.toLocaleTimeString()}.</h2></div>);}}ReactDOM.render(<Clock />,document.getElementById('example'));

将生命周期方法添加到类中

class Clock extends React.Component {constructor(props) {super(props);this.state = {date: new Date()};}componentDidMount() {this.timerID = setInterval(() => this.tick(),1000);}componentWillUnmount() {clearInterval(this.timerID);}tick() {this.setState({date: new Date()});}render() {return (<div><h1>Hello, world!</h1><h2>现在是 {this.state.date.toLocaleTimeString()}.</h2></div>);}}ReactDOM.render(<Clock />,document.getElementById('example'));

props 组件React 把组件看成是一个状态机（State Machines）。通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。
React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面（不要操作 DOM）。

function HelloMessage(props) {return <h1>Hello {props.name}!</h1>;}const element = <HelloMessage name="Runoob"/>;ReactDOM.render(element,document.getElementById('example'));

事件的处理

class Toggle extends React.Component {constructor(props) {super(props);this.state = {isToggleOn: true};// 这边绑定是必要的，这样 `this` 才能在回调函数中使用this.handleClick = this.handleClick.bind(this);}handleClick() {this.setState(prevState => ({isToggleOn: !prevState.isToggleOn}));}render() {return (<button onClick={this.handleClick}>{this.state.isToggleOn ? 'ON' : 'OFF'}</button>);}}ReactDOM.render(<Toggle />,document.getElementById('example'));