React 开发

React 教程

React起源于Facebook 的内部项目，用来架设 Instagram 的网站，并于2013年5月开源。是一个用于构建用户界面的JAVASCRIPT库。

React特点
声明式设计、高效、灵活、JSX 、组件 、单向响应的数据流

React 安装

使用 Staticfile CDN 的 React CDN 库，地址如下：

<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/babelstandalone/6.26.0/babel.min.js"></script>

官方提供的 CDN 地址：

<script src="https://unpkg.com/react@16/umd/react.development.js"></script> 
<script  src="https://unpkg.com/react-dom@16/umd/reactdom.development.js"></script> 
<!-- 生产环境中不建议使用 --> 
<script  src="https://unpkg.com/babelstandalone@6.15.0/babel.min.js"></script>

实例中引入了三个库： react.min.js 、react-dom.min.js 和 babel.min.js：

1. react.min.js - React 的核心库
2. react-dom.min.js - 提供与 DOM 相关的功能
3. babel.min.js - Babel 可以将 ES6 代码转为 ES5 代码

npm 使用 React

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

$ npm config set registry https://registry.npm.taobao.org

使用 cnpm 命令来安装模块：

$ cnpm install [name]

create-react-app 快速构建项目

$ cnpm install -g create-react-app
$ create-react-app my-app
$ cd my-app/
$ npm start

React 元素渲染

const element = <h1>Hello, world!</h1>; 
ReactDOM.render( 
        element, 
        document.getElementById('example') 
);

React JSX

ReactDOM.render( 
        <h1>Hello, world!</h1>, 
        document.getElementById('example') 
);

React 组件

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

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

以上实例中 name 属性通过 props.name 来获取

React状态

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

state 和 props 主要的区别在于 props 是不可变的，而 state 可以根据与用户交互来改变。state 来更新和修改数据。 而子组件只能通过 props 来传递数据。

React 事件处理

<button onClick={activateLasers}>
  激活按钮
</button>

React 条件渲染

function Mailbox(props) { 
const unreadMessages = props.unreadMessages; 
return ( <div> <h1>Hello!</h1> {
unreadMessages.length > 0 && 
<h2> 您有 {unreadMessages.length} 条未读信息。 </h2> } </div> ); 
} 
const messages = ['React', 'Re: React', 'Re:Re: React']; 
ReactDOM.render( 
<Mailbox unreadMessages={messages} />, document.getElementById('example') );

React 列表 & Keys

map() 方法遍历数组

const numbers = [1, 2, 3, 4, 5]; 
const listItems = numbers.map((numbers) => <li>{numbers}</li> ); 
ReactDOM.render( <ul>{listItems}</ul>, document.getElementById('example') );

每个列表元素分配一个 key

function NumberList(props) { 
    const numbers = props.numbers; 
    const listItems = numbers.map((number) => 
<li key={number.toString()}> {number} </li>
 ); 
return ( 
    <ul>{listItems}</ul> 
    ); 
} 
const numbers = [1, 2, 3, 4, 5];
 ReactDOM.render( 
<NumberList numbers={numbers} />, 
document.getElementById('example') 
);