react

发布时间：2020-12-15 20:33:38 所属栏目：百科来源：网络整理

导读：1. react 概念定义： react 是一个 js 库，主要用于构建 UI 。特点：模拟dom 减少与dom交互（性能高），使用 jsx 语法，可自由构建组件，单向响应数据流。（ jsx 特点：一个看起来很像 XML 的 JavaScript 语法扩展；执行更快，因为它在编译为 JavaScri

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,5];
const listItems = numbers.map((number) =>
  <li key={number.toString()}>
    {number}
  </li>
);

View Code

4. 参考网址

Babel原理

菜鸟教程

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!