react

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

View Code

注释需要写在花括号中

ReactDOM.render(
    <div>
    <h1>菜鸟教程</h1>
    {/*注释...*/}
     </div>,
    document.getElementById('example')
);

View Code

JSX 允许在模板中插入数组，数组会自动展开所有成员

var arr = [
  <h1>菜鸟教程</h1>,
  <h2>学的不仅是技术，更是梦想！</h2>,
];
ReactDOM.render(
  <div>{arr}</div>,
  document.getElementById('example')
);

View Code

）

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>

View Code

备注：

实际使用的都是 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')
);

View Code

备注：

也可以使用 ES6 class 来定义一个组件:

class Welcome extends React.Component {
  render() {
    return <h1>Hello World!</h1>;
  }
}

View Code

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

View Code

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

View Code

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

View Code

其他概念：挂载、卸载、生命周期钩子

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

View Code

state 和 props 主要的区别在于 props 是不可变的，而 state 可以根据与用户交互来改变

3.4 事件处理

function ActionLink() {
  function handleClick(e) {
    e.preventDefault();
    console.log('链接被点击');
  }
 
  return (
    <a href="#" onClick={handleClick}>
      点我
    </a>
  );
}

View Code

备注：

传入一个函数作为事件处理函数，而不是一个字符串；（<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')
);

View Code

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

View Code

3.5.3 三目

render() {
  const isLoggedIn = this.state.isLoggedIn;
  return (
    <div>
      {isLoggedIn ? (
        <LogoutButton onClick={this.handleLogoutClick} />
      ) : (
        <LoginButton onClick={this.handleLoginClick} />
      )}
    </div>
  );
}

View Code

实例：阻止组件渲染

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

View Code

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

View Code

3.7 Keys

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
  <li key={number.toString()}>
    {number}
  </li>
);

View Code

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. 参考网址

Babel原理

菜鸟教程

posted @ 2019-03-03 16:57 justSmile2 阅读(164) 评论(0) 收藏举报

刷新页面返回顶部

justSmile2

惜时如金

react