1. react 概念
定义：
react 是一个 js 库，主要用于构建 UI 。
特点：
模拟dom 减少与dom交互（性能高），使用 jsx 语法，可自由构建组件，单向响应数据流。
（
jsx 特点：
一个看起来很像 XML 的 JavaScript 语法扩展；
执行更快，因为它在编译为 JavaScript 代码后进行了优化；
类型安全，在编译过程中就能发现错误；
编写模板更加简单快速；
jsx 的使用：
JSX 代码可以放在一个独立文件上；（<script type="text/babel" src="helloworld_react.js"></script>）
可以在 JSX 中使用 JavaScript 表达式。表达式写在花括号 {} 中。
JSX 中不能使用 if else 语句，但可以使用 conditional (三元运算) 表达式来替代；
React 推荐使用内联样式；
var myStyle = { fontSize: 100, color: '#FF0000' }; ReactDOM.render( <h1 style = {myStyle}>菜鸟教程</h1>, document.getElementById('example') );
注释需要写在花括号中
ReactDOM.render( <div> <h1>菜鸟教程</h1> {/*注释...*/} </div>, document.getElementById('example') );
JSX 允许在模板中插入数组，数组会自动展开所有成员
var arr = [ <h1>菜鸟教程</h1>, <h2>学的不仅是技术，更是梦想！</h2>, ]; ReactDOM.render( <div>{arr}</div>, document.getElementById('example') );
）
2. react 基本用法
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Hello 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"> ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('example') ); </script> </body> </html>
备注：
实际使用的都是 babel 转换之后的兼容低版本浏览器的代码；
使用 jsx 语法不是必须的，但是 babel 支持对 jsx 的转码；
使用 jsx 则必须确定解析类型，即 设置 script 标签引入类型为 type="text/babel" ；
3. react 细节点
3.1 组件
3.1.1 基本组件
function HelloMessage(props) { return <h1>Hello World!</h1>; } const element = <HelloMessage />; ReactDOM.render( element, document.getElementById('example') );
备注：
也可以使用 ES6 class 来定义一个组件:
class Welcome extends React.Component { render() { return <h1>Hello World!</h1>; } }
原生 HTML 元素名以小写字母开头，而自定义的 React 类名以大写字母开头；
组件类只能包含一个顶层标签，否则报错；
3.1.2 带参数组件
function HelloMessage(props) { return <h1>Hello {props.name}!</h1>; } const element = <HelloMessage name="Runoob"/>; ReactDOM.render( element, document.getElementById('example') );
3.1.3 复合组件
function Name(props) { return <h1>网站名称：{props.name}</h1>; } function Url(props) { return <h1>网站地址：{props.url}</h1>; } function Nickname(props) { return <h1>网站小名：{props.nickname}</h1>; } function App() { return ( <div> <Name name="菜鸟教程" /> <Url url="http://www.runoob.com" /> <Nickname nickname="Runoob" /> </div> ); } ReactDOM.render( <App />, document.getElementById('example') );
3.2 State(状态)
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') );
其他概念：挂载、卸载、生命周期钩子
3.3 Props
class HelloMessage extends React.Component { render() { return ( <h1>Hello, {this.props.name}</h1> ); } } HelloMessage.defaultProps = { name: 'Runoob' }; const element = <HelloMessage/>; ReactDOM.render( element, document.getElementById('example') );
state 和 props 主要的区别在于 props 是不可变的，而 state 可以根据与用户交互来改变
3.4 事件处理
function ActionLink() { function handleClick(e) { e.preventDefault(); console.log('链接被点击'); } return ( <a href="#" onClick={handleClick}> 点我 </a> ); }
备注：
传入一个函数作为事件处理函数，而不是一个字符串；（<button onClick={activateLasers}> 激活按钮 </button>）；
不能使用返回 false 的方式阻止默认行为， 你必须明确的使用 preventDefault ；
3.5 条件渲染
3.5.1 if
function UserGreeting(props) { return <h1>欢迎回来!</h1>; } function GuestGreeting(props) { return <h1>请先注册。</h1>; } function Greeting(props) { const isLoggedIn = props.isLoggedIn; if (isLoggedIn) { return <UserGreeting />; } return <GuestGreeting />; } ReactDOM.render( // 尝试修改 isLoggedIn={true}: <Greeting isLoggedIn={false} />, document.getElementById('example') );
3.5.2 与运算符 && （短路）
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') );
3.5.3 三目
render() { const isLoggedIn = this.state.isLoggedIn; return ( <div> {isLoggedIn ? ( <LogoutButton onClick={this.handleLogoutClick} /> ) : ( <LoginButton onClick={this.handleLoginClick} /> )} </div> ); }
实例： 阻止组件渲染
function WarningBanner(props) { if (!props.warn) { return null; } return ( <div className="warning"> 警告! </div> ); } class Page extends React.Component { constructor(props) { super(props); this.state = {showWarning: true} this.handleToggleClick = this.handleToggleClick.bind(this); } handleToggleClick() { this.setState(prevState => ({ showWarning: !prevState.showWarning })); } render() { return ( <div> <WarningBanner warn={this.state.showWarning} /> <button onClick={this.handleToggleClick}> {this.state.showWarning ? '隐藏' : '显示'} </button> </div> ); } } ReactDOM.render( <Page />, document.getElementById('example') );
3.6 列表
const numbers = [1, 2, 3, 4, 5]; const listItems = numbers.map((numbers) => <li>{numbers}</li> ); ReactDOM.render( <ul>{listItems}</ul>, document.getElementById('example') );
3.7 Keys
const numbers = [1, 2, 3, 4, 5]; const listItems = numbers.map((number) => <li key={number.toString()}> {number} </li> );
3.6 api
设置状态：setState
替换状态：replaceState
设置属性：setProps
替换属性：replaceProps
强制更新：forceUpdate
获取DOM节点：findDOMNode
判断组件挂载状态：isMounted
3.7 生命周期
Mounting：已插入真实 DOM
Updating：正在被重新渲染
Unmounting：已移出真实 DOM
3.8 AJAX
3.9 表单与事件
3.10 Refs
这个特殊的属性允许你引用 render() 返回的相应的支撑实例（ backing instance ）
4. 参考网址