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

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

// 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>

// 使用原生的 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狼人

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

IT小尚

引用和评论

web前端培训vue3响应式reactive源码分析

Vue.js-Vue实例

你可能不知道的图片加载相关知识

手写一个动态海洋和天空效果的vue hooks

使用CSS给标题添加书名号并超出省略

Koa+Typescript起手式(空环境) 不用每次玩node都要搭环境了！

原生electron起步-从零到一完成构建和打包