写点什么

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

  • 2021 年 11 月 30 日
  • 本文字数:3452 字

    阅读完需:约 11 分钟

React 简介


React 基本使用


<div id="test"></div>

<script type="text/javascript" src="../js/react.development.js"></script>

<script type="text/javascript" src="../js/react-dom.development.js"></script>

<script type="text/javascript" src="../js/babel.min.js"></script>

<script type="text/babel"> //必须声明 babel

// 创建虚拟 DOM 元素

const vDom = <h1>Hello React</h1> // 千万不要加引号

// 渲染虚拟 DOM 到页面真实 DOM 容器中

ReactDOM.render(vDom, document.getElementById('test'))</script>


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="../js/react.development.js"></script>

<script type="text/javascript" src="../js/react-dom.development.js"></script>

<script type="text/javascript" src="../js/babel.min.js"></script>

<script type="text/javascript">

// 1. 创建虚拟 DOM

/*方式一: 纯 JS(一般不用)创建虚拟 DOM 元素对象*/

const msg = 'I Like You!'

const myId = 'Atguigu'

//第一个标签 第二个 id 标签属性 第三个标签体内容

//React.createElement('h2', {id: myId}, hello)

const vDOM1 = React.createElement('h2', {id: myId}, msg.toUpperCase())

// 2. 渲染到真实页面

const domContainer = document.getElementById('test')

// debugger

ReactDOM.render(vDOM1, domContainer)

</script>

<script type="text/babel"> //必须声明 babel

const msg='I LIKE YOU'

const myId='vue'

// 1. 创建虚拟 DOM

/*方式二: JSX 创建虚拟 DOM 元素对象*/

const vDOM2 = <h3 id={myId.toUpperCase()}>{msg.toLowerCase()}</h3>

// debugger

// 2. 渲染到真实页面

ReactDOM.render(vDOM2, document.getElementById('test2'))

ReactDOM.render(vDom, domContainer)

</script>


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'));


条件的修改


function Greeting(props) {

const isLoggedIn = props.isLoggedIn;

if (isLoggedIn) {

return <UserGreeting />;

}

return <GuestGreeting />;

}

ReactDOM.render(

// 尝试修改 isLoggedIn={true}:

<Greeting isLoggedIn={false} />,

document.getElementById('example')

);


声明周期


class Hello extends React.Component {

constructor(props) {

super(props);

this.state = {opacity: 1.0};

}

componentDidMount() {

this.timer = setInterval(function () {

var opacity = this.state.opacity;

opacity -= .05;

if (opacity < 0.1) {

opacity = 1.0;

}

this.setState({

opacity: opacity

});

}.bind(this), 100);

}

render () {

return (

<div style={{opacity: this.state.opacity}}>

Hello {this.props.name}

</div>

);

}

}

ReactDOM.render(

<Hello name="world"/>,

document.body

);


React AJAX


React 组件的数据可以通过 componentDidMount 方法中的 Ajax 来获取,当从服务端获取数据时可以将数据存储在 state 中,再用 this.setState 方法重新渲染 UI。


class UserGist extends React.Component {

constructor(props) {

super(props);

this.state = {username: '', lastGistUrl: ''};

}

componentDidMount() {

this.serverRequest = $.get(this.props.source, function (result) {

var lastGist = result[0];

this.setState({

username: lastGist.owner.login,

lastGistUrl: lastGist.html_url

});

}.bind(this));

}

componentWillUnmount() {

this.serverRequest.abort();

}

render() {

return (

<div>

{this.state.username} 用户最新的 Gist 共享地址:

<a href={this.state.lastGistUrl}>{this.state.lastGistUrl}</a>

</div>

);

}

}

ReactDOM.render(

<UserGist source="https://api.github.com/users/octocat/gists" />,

document.getElementById('example')

);


React Refs


React 支持一种非常特殊的属性 Ref ,你可以用来绑定到 render() 输出的任何组件上。


<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8" />

<title>React 实例</title>

<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>

<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>

<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>

</head>

<body>

<div id="example"></div>

<script type="text/babel">

class MyComponent extends React.Component {

handleClick() {

// 使用原生的 DOM API 获取焦点

this.refs.myInput.focus();

}

render() {

// 当组件插入到 DOM 后,ref 属性添加一个组件的引用于到 this.refs

return (

<div>

<input type="text" ref="myInput" />

<input

type="button"

value="点我输入框获取焦点"

onClick={this.handleClick.bind(this)}

/>

</div>

);

}

}

ReactDOM.render(

<MyComponent />,

document.getElementById('example')

);

</script>

</body>

</html>


原创作者:Y 狼人

用户头像

关注尚硅谷,轻松学IT 2021.11.23 加入

还未添加个人简介

评论

发布
暂无评论
前端开发中需要掌握的开发框架React