React 初始化项目及JSX语法简介

发布时间：2020-12-15 06:32:59 所属栏目：百科来源：网络整理

导读：React 初始化项目这里只写出完善环境下的初始化命令，具体的环境搭建可参考 React JSX | 菜鸟教程使用终端命令快速构建项目： cnpm install -g create-react-app create-react-app my-app cd my-app/ npm start 项目结构 my-app/ README.md - 自述文件 nod

React 初始化项目

这里只写出完善环境下的初始化命令，具体的环境搭建可参考 React JSX | 菜鸟教程

使用终端命令快速构建项目：

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

项目结构

my-app/
README.md - 自述文件
node_modules/ - node模块（存放npm install 的组件）
package.json - 包管理文件（管理npm的安装包）
.gitignore - git忽略文件
public/- 存放了项目的启动页面及依赖文件
favicon.ico - 网页标题logo
index.html - 网页首页
src/ - 页面各种资源
App.css - app页面css
App.js - App页面组件及js
App.test.js - 测试文件，删除没有影响（存疑）
index.css - 启动页样式
index.js - 启动页组件
logo.svg - Logo
registerServiceWorker.js - 用于在生产环境中为用户在本地创建一个service worker 来缓存资源到本地，提升应用的访问速度

React JSX文件

JSX就是Javascript和XML结合的一种格式。React发明了JSX，利用HTML语法来创建虚拟DOM。当遇到<，JSX就当HTML解析，遇到{就当JavaScript解析。

优点

JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。
它是类型安全的，在编译过程中就能发现错误。
使用 JSX 编写模板更加简单快速。

JSX 语法介绍

JSX本身就和XML语法类似，可以定义属性以及子元素。唯一特殊的是可以用大括号来加入JavaScript表达式，如：

var person = <Person name={window.isLoggedIn ? window.name : ''} />;

一般每个组件都定义了一组属性（props，properties的简写）接收输入参数，这些属性通过XML标记的属性来指定。大括号中的语法就是纯JavaScript表达式，返回值会赋予组件的对应属性，因此可以使用任何JavaScript变量或者函数调用。上述代码经过JSX编译后会得到：

var person = React.createElement(
  Person,{name: window.isLoggedIn ? window.name : ''}
);

子元素也是类似，既可以在{}内写入xml，又可以在xml中插入{}形式的js，如此不断递归使用，如：

var node = (
  <div className="container">
    {
       person ? <span>Welcome back,<b>{person.firstName} {person.lastName}</b>!</span>
       : <span>Please log in</span>
    }
  </div>
);

如果需要展现一组子节点，只需表达式返回一个JavaScript数组，数组的每个元素都是一个React组件，如：

var ul = (
  <ul class="unstyled">
    {lis}
  </ul>
);

其中lis就是有多个“li”元素的数组。

在JSX中使用事件

和原生HTML定义事件的唯一区别就是JSX采用驼峰写法来描述事件名称，大括号中仍然是标准的JavaScript表达式，返回一个事件处理函数。在JSX中你不需要关心什么时机去移除事件绑定，因为React会在对应的真实DOM节点移除时就自动解除了事件绑定。

<button onClick={this.checkAndSubmit.bind(this)}>Submit</button>

React并不会真正的绑定事件到每一个具体的元素上，而是采用事件代理的模式：在根节点document上为每种事件添加唯一的Listener，然后通过事件的target找到真实的触发元素。这样从触发元素到顶层节点之间的所有节点如果有绑定这个事件，React都会触发对应的事件处理函数。这就是所谓的React模拟事件系统。

在JSX中使用样式

在JSX中使用样式，不像常规的那样需要个一个单独的CSS文件，而是通过style属性来定义，但和真实DOM不同的是，属性值不能是字符串而必须为对象，如：

<div style={{color: '#ff0000',fontSize: '14px'}}>Hello World.</div>

其中双大括号具有不同的含义，外层大括号为JSX的语法，内层大括号为JS代码，为了代码更直观，也可以先把JS赋值给一个对象，然后传进去，如：

var style = {
  color: '#ff0000',fontSize: '14px'
};

var node = <div style={style}>HelloWorld.</div>;

在JSX中可以使用所有的的样式，基本上属性名的转换规范就是将其写成驼峰写法，例如“background-color”变为“backgroundColor”,“font-size”变为“fontSize”，这和标准的JavaScript操作DOM样式的API是一致的。

使用自定义组件

在JSX中，我们不仅可以使用React自带div,input…这些虚拟DOM元素，还可以自定义组件。组件定义之后，也都可以利用XML语法去声明，而能够使用的XML Tag就是在当前JavaScript上下文的变量名，这一点非常好用，你不必再去考虑某个Tag是如何对应到相应的组件实现。例如React官方教程中的例子：

class HelloWorld extends React.Component{
  render() {
    return (
      <p>
        Hello,<input type="text" placeholder="Your name here" />!
        It is {this.props.date.toTimeString()}
      </p>
    );
  }
};

setInterval(function() {
  React.render(
    <HelloWorld date={new Date()} />,document.getElementById('example')
  );
},500);

其中声明了一个名为HelloWorld的组件，那么就可以在XML中使用，这个Tag就是JavaScript变量名，我们可以用任意变量名：

var MyHelloWorld = HelloWorld; React.render(<MyHelloWorld />,…);

而且还可以引入命名空间

var sampleNameSpace = {
  MyHelloWorld: HelloWorld
};
React.render(<sampleNameSpace.MyHelloWorld />,…);

HTML转义

在组件内部添加html代码,并将html代码渲染到页面上。React默认会进行HTML的转义，但有些特殊情况会转义的不够准确，如使用&nbsp添加空格时，这时可以使用dangerouslySetInnerHTML进行转义：

<div dangerouslySetInnerHTML={{__html: '<h3>hahhah</h3>'}}></div>

dangerouslySetInnerHTML必须是一个对象，所以也可以赋值给对象，使代码更加直观：

function createMarkup() {
  return {__html: 'First &nbsp;&nbsp;&nbsp; Second'};
}

function MyComponent() {
  return <div dangerouslySetInnerHTML={createMarkup()}></div>;
}

注释规则

在标签内部的注释需要{}
在标签外的的注释不能使用{}

ReactDOM.render(
    <h1>Hello,world!{/*在标签内*/}</h1>,// 在标签外
    document.getElementById('example')
);

组件的生命周期

这一篇应该就够了
React Native 中组件的生命周期

参考：
React JSX | 菜鸟教程
深入浅出React（三）：理解JSX和组件

（编辑：李大同）

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