React.js学习1——基础知识、JSX语法、组件、React State、React Props、React事件处理、React 条件渲染、条件渲染、React 组件 API

Love The Way You Lie 2022-05-03 23:50 275阅读 0赞

# 一、基础知识 #

reactjs源于 Facebook 在2013年5月开源的内部项目，后来引起来更多人开始关注和使用，或将成为 Web 开发的主流工具。它是一个UI框架。

## 1，特点 ##

它有几个特点：（1）性能出众，由于它用了很多虚拟元素，之后会详细说明；（2）代码逻辑非常简单；（3）它将复用性做到极致，简单说就是封装了很多组件，不和业务平台相关联。

## 2，认识误区 ##

（1）它不是一个完整的mvc，只是个view。许多同学会很奇怪，知识一个view层就能做达到优化性能？实际上mvc真正能优化性能的部分也就是view层。

（2）react的服务端，render功能并非核心，它的优势并不在服务端应用。

（3）react不是一个新的模板语言，JSX只是一个表象，没有JSX，react也能工作。

（4）react框架的最终目标是实现组件化。

## 3，工作原理 ##

### （1）原理 ###

![70][]

react的dom进行了修改并不是直接进行修改，而是比较两次的dom值变化，然后再真正应用到我们的dom元素当中去。

### （2）组件化 ###

React以组件的方式构思UI，每个功能由独立的模块定义成组件，再将小组件构成大的组件，完成整体UI的构建。

组件则具有以下特征：（1）可组合，复杂的UI可以拆分成多个简单的UI；（2）可重用，每个组件可以用到多个UI场景；（3）可维护，每个组件有自己的逻辑，是可以单独维护的。

# 二、reactJS框架搭建 #

它的搭建同样有两种方式，一种是npm方式，另一种是直接引入js包。npm方式要下node.js，然后上reactJS官网查看安装方式。博主采用直接引入方式，先来直接看一看怎么使用reactJS。

从官网下载，不过好像今天github崩了。

下载完后第一步：

<script src="js/react.js" type="text/javascript">  
  </script>  
  <script src="js/react-dom.js" type="text/javascript">  
  </script>  
  <script src="js/babel.js" type="text/javascript">  
  </script>

这三个包依次的功能说明：（1）react.js为核心库，react的所有功能都是通过这个库来提供的；（2）react-dom.js，之前说过我们的react是通过ui来优化我们的view层，那操作dom层要怎么处理，就是靠这个库，要注意，要有react核心库之后才能操作dom元素，它能使我们的dom元素渲染更加快捷；（3）babel.js的功能： Babel 可以将 ES6 代码转为 ES5 代码，这样我们就能在目前不支持 ES6 浏览器上执行 React 代码。Babel 内嵌了对 JSX 的支持。通过将 Babel 和 babel-sublime 包（package）一同使用可以让源码的语法渲染上升到一个全新的水平。

导入完成之后，我们实现第一个功能，在div中显示 hello 苏云南雁！

<div id="show"></div>  
    
  <script type="text/babel">  
   var ele = document.getElementById("show");  
   ReactDOM.render(  
    <h3>hello 苏云南雁!</h3>  
    ,ele  
   );  
  </script>

![70 1][]

这样就写好了一个react界面。说明两点：

（1）如果我们需要使用 JSX，则 <script> 标签的 type 属性需要设置为 text/babel。

（2）ReactDOM.render()有两个参数，第一个参数用于将模板转化为HTML语言，第二参数用于指定插入的dom节点。

直接引用的方式讲完了，我们还是用现在比较流行的npm方式：

国内使用npm很慢，可以使用淘宝定制的 cnpm ：

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

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

之后就可以使用cnpm：

create-react-app 是来自于 Facebook，通过该命令我们无需配置就能快速构建 React 开发环境。

创建的这个项目基于 Webpack + ES6

执行：

cnpm install -g create-react-app

create-react-app my-app

这样就可以是下载了。打开看一下我的react项目：

cd my-app

![70 2][]

然后启动：npm start

![70 3][]

# 三、JSX语法 #

React 使用 JSX 来替代常规的 JavaScript，它是一个看起来很像 XML 的 JavaScript 语法扩展。

JSX执行会更快，因为它在编译之后会进行代码的优化；然后JSX类型更安全，在编译过程中就能发现错误；同时JSX编写模块更加简单迅速。

JSX中可以有多个html标签，但是需要使用一个 div 元素包裹它，实例中的 p 元素添加了自定义属性 **data-myattribute**，添加自定义属性需要使用 **data-** 前缀。

在JSX中使用js表达式：

<h3>在JSX中使用js表达式</h3>  
        1+1=\{1+1\}

![70 4][]

## 1，JSX支持\{\}和HTML的混合： ##

<div id="show"></div>  
    
  <script type="text/babel">  
   var ele = document.getElementById("show");  
   ReactDOM.render(  
    <h3>hello 苏云南雁!\{10+100\}</h3>  
    ,ele  
   );  
  </script>

结果：

![70 5][]

### （1）\{year\}获取变量： ###

![70 6][]

### （2）取出数组： ###

![70 7][]

### （3）选择结构 ###

### （4）内联样式 ###

var myStyle = \{  
      fontSize: 100,  
      color: '\#FF0000'  
  \};

render中加入\{myStyle\}：

<h3 style=\{myStyle\}>在JSX中使用js表达式</h3>

即修改了样式

![70 8][]

## （5）注释 ##

\{/\*注释...\*/\}

React 的 JSX 使用大、小写的约定来区分本地组件的类和 HTML 标签。

# 四、React组件 #

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

解析：

## 1，使用函数定义一个组件 ##

function HelloMessage(props) \{  
    return <h1>Hello World!</h1>;  
\}

如果用es6语法定义：

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

## 2，const element = <HelloMessage /> 为用户自定义的组件。 ##

注意，原生 HTML 元素名以小写字母开头，而自定义的 React 类名以大写字母开头，比如 HelloMessage 不能写成 helloMessage。除此之外还需要注意组件类只能包含一个顶层标签，否则也会报错。

当然，这样就可以通过 **props** 来给HelloMessage 传递参数，然后通过this,props进行调用。

JSX中给标签添加属性时：

注意，在添加属性时， class 属性需要写成 className ，for 属性需要写成 htmlFor ，这是因为 class 和 for 是 JavaScript 的保留字。

## 3，复合组件 ##

# 五、React State(状态) #

React把组件看成一个状态机，通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。

React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面（不要操作 DOM）。

在APP.js中先定义constructor

constructor(props) \{  
    super(props);  
    this.state = \{date: new Date()\};  
  \}

之后再在render中调用：

<h2>现在是 \{this.state.date.toLocaleTimeString()\}.</h2>

![70 9][]

实际上在class中是通过this.state设置变量属性。

## 1，将生命周期方法添加到类中 ##

在具有许多组件的应用程序中，在销毁时释放组件所占用的资源非常重要。

每当 Clock 组件第一次加载到 DOM 中的时候，我们都想生成定时器，这在 React 中被称为**挂载**。

同样，每当 Clock 生成的这个 DOM 被移除的时候，我们也会想要清除定时器，这在 React 中被称为**卸载**。

在我的APP.js中增加如下内容：

constructor(props) \{  
    super(props);  
    this.state = \{date: new Date()\};  
  \}

componentDidMount() \{  
    this.timerID = setInterval(  
      () => this.tick(),  
      1000  
    );  
  \}  
   
  componentWillUnmount() \{  
    clearInterval(this.timerID);  
  \}  
   
  tick() \{  
    this.setState(\{  
      date: new Date()  
    \});  
  \}

render中还是：

<h2>现在是 \{this.state.date.toLocaleTimeString()\}.</h2>  
这样就实现了在前台时间定时变动：

![70 10][]

componentDidMount() 与 componentWillUnmount() 方法被称作生命周期钩子。

在组件输出到 DOM 后会执行 componentDidMount() 钩子，我们就可以在这个钩子上设置一个定时器。

this.timerID 为计算器的 ID，我们可以在 componentWillUnmount() 钩子中卸载计算器。

代码的执行顺序：

1，ReactDOM.render() 时，React 调用 `Clock` 组件的构造函数，在构造函数中，通过this.state设置初始日期date;

2，然后React会调用App.js的render方法，这时会更新DOM元素的内容；

3，当APP插入到DOM中，React 调用 `componentDidMount()` 生命周期钩子。在其中，`Clock` 组件要求浏览器设置一个定时器，每秒钟调用一次 `tick()`。

4，tick()会定时更新这个date，每秒中调用一次tick()，这个状态的变化会被react捕获到，并更新dom；

5，一旦 `Clock` 组件被从 DOM 中移除，React 会调用 `componentWillUnmount()` 这个钩子函数，定时器也就会被清除。

## 2，数据自顶向下流动 ##

父组件或子组件都不能知道某个组件是有状态还是无状态，并且它们不应该关心某组件是被定义为一个函数还是一个类。

这就是为什么状态通常被称为局部或封装。 除了拥有并设置它的组件外，其它组件不可访问。

任何状态始终由某些特定组件所有，并且从该状态导出的任何数据或 UI 只能影响树中下方的组件。

# 六、React Props #

state 和 props 主要的区别在于 **props** 是不可变的，而 state 可以根据与用户交互来改变。这就是为什么有些容器组件需要定义 state 来更新和修改数据。 而子组件只能通过 props 来传递数据。

## 1，使用props ##

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

实例中 name 属性通过 this.props.name 来获取。

## 2，默认 Props ##

可以通过组件类的 defaultProps 属性为 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')  
);

## 3，State 和 Props ##

class WebSite extends React.Component \{  
  constructor() \{  
      super();  
  
      this.state = \{  
        name: "菜鸟教程",  
        site: "https://www.runoob.com"  
      \}  
    \}  
  render() \{  
    return (  
      <div>  
        <Name name=\{this.state.name\} />  
        <Link site=\{this.state.site\} />  
      </div>  
    );  
  \}  
\}  
  
  
  
class Name extends React.Component \{  
  render() \{  
    return (  
      <h1>\{this.props.name\}</h1>  
    );  
  \}  
\}  
  
class Link extends React.Component \{  
  render() \{  
    return (  
      <a href=\{this.props.site\}>  
        \{this.props.site\}  
      </a>  
    );  
  \}  
\}  
  
ReactDOM.render(  
  <WebSite />,  
  document.getElementById('example')  
);

实际上，父组件将可以将值通过state传给子组件。

## 4，Props 验证 ##

React.PropTypes 在 React v15.5 版本后已经移到了 **prop-types** 库。

Props 验证使用 **propTypes**，它可以保证我们的应用组件被正确使用，React.PropTypes 提供很多验证器 (validator) 来验证传入数据是否有效。当向 props 传入无效数据时，JavaScript 控制台会抛出警告。

以下实例创建一个 Mytitle 组件，属性 title 是必须的且是字符串，非字符串类型会自动转换为字符串 ：

# 七、React 事件处理、条件渲染 #

React 元素的事件处理和 DOM 元素类似。但是有一点语法上的不同:

*  React 事件绑定属性的命名采用驼峰式写法，而不是小写。
 *  如果采用 JSX 的语法你需要传入一个函数作为事件处理函数，而不是一个字符串(DOM 元素的写法)

HTML 通常写法是：

React 中写法为：

在 React 中另一个不同是你不能使用返回 **false** 的方式阻止默认行为， 你必须明确的使用 preventDefault。

例如，通常我们在 HTML 中阻止链接默认打开一个新页面，可以这样写：

在 React 的写法为：

实例中 e 是一个合成事件。

使用 React 的时候通常你不需要使用 addEventListener 为一个已创建的 DOM 元素添加监听器。你仅仅需要在这个元素初始渲染的时候提供一个监听器。

对待 JSX 回调函数中的 this，必须谨慎，类的方法默认是不会绑定 this 的。通常情况下，如果你没有在方法后面添加 () ，例如 onClick=\{this.handleClick\}，你应该为这个方法绑定 this（bind方法）。如果使用 bind 让你很烦，这里有两种方式可以解决。如果你正在使用实验性的属性初始化器语法，你可以使用属性初始化器来正确的绑定回调函数：

（1）()=>方式

（2）回调函数中使用()=>

## 1,向事件处理程序传递参数 ##

传递参数有两种方式：

<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
    <button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>

案例：

class Popper extends React.Component\{  
    constructor()\{  
        super();  
        this.state = \{name:'Hello world!'\};  
    \}  
     
    preventPop(name, e)\{    //事件对象e要放在最后  
        e.preventDefault();  
        alert(name);  
    \}  
     
    render()\{  
        return (  
            <div>  
                <p>hello</p>  
                \{/\* 通过 bind() 方法传递参数。 \*/\}  
                <a href="https://reactjs.org" onClick=\{this.preventPop.bind(this,this.state.name)\}>Click</a>  
            </div>  
        );  
    \}  
\}

## 2，React 条件渲染 ##

使用 JavaScript 操作符 if 或条件运算符来创建表示当前状态的元素，然后让 React 根据它们来更新 UI。

所谓条件渲染，是根据相关条件决定render里 的返回值：

（1）

return (  
      <div>  
        <Greeting isLoggedIn=\{isLoggedIn\} /> \{button\}  
      </div>  
    );

（2）

return (  
    <div>  
      <h1>Hello!</h1>  
      \{unreadMessages.length > 0 &&  
        <h2> 您有 \{unreadMessages.length\} 条未读信息。  
        </h2>  
      \}  
    </div>  
  );

（3）

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

（4）阻止则是采用条件判断，返回null给render实际上就是阻止。

if (!props.warn) \{  
    return null;  
  \}

# 八、React 组件 AP #

## 1，设置状态:setState ##

setState(object nextState[, function callback])

*  **nextState**，将要设置的新状态，该状态会和当前的**state**合并
 *  **callback**，可选参数，回调函数。该函数会在**setState**设置成功，且组件重新渲染后调用。

不能在组件内部通过this.state修改状态，因为该状态会在调用setState()后被替换。

setState()并不会立即改变this.state，而是创建一个即将处理的state。setState()并不一定是同步的，为了提升性能React会批量执行state和DOM渲染。

setState()总是会触发一次组件重绘，除非在shouldComponentUpdate()中实现了一些条件渲染逻辑。

## 2，替换状态：replaceState ##

replaceState(object nextState[, function callback])

**replaceState()**方法与**setState()**类似，但是方法只会保留**nextState**中状态，原**state**不在**nextState**中的状态都会被删除。

参考：菜鸟教程   [http://www.runoob.com/react/react-state.html][http_www.runoob.com_react_react-state.html]

[70]: /images/20220504/f5d48aa526974ed1a5978abf4f929c75.png
[70 1]: /images/20220504/1ab9b961a77f44d78b991a9df90d6e7f.png
[70 2]: /images/20220504/2f199141ba8b41fabae94f79d8e3faae.png
[70 3]: /images/20220504/b6e1e2f411eb489d9e22ffd227ca1c3f.png
[70 4]: /images/20220504/5b2d284f920c4da1860bad22162767d9.png
[70 5]: /images/20220504/f7cb7c6f4874479fb7b3041bd2dc4b93.png
[70 6]: /images/20220504/83ce69cf6f704def9f3fb1af1926c83d.png
[70 7]: /images/20220504/b3c028a192964b80ba6fc10f8c13c312.png
[70 8]: /images/20220504/bcd245201a4c40b68f47a82ff6d1ed74.png
[70 9]: /images/20220504/70080f1b50f44fe99c2b44db19b894d8.png
[70 10]: /images/20220504/f62fb565d4914abcae4d717a0e81a6d3.png
[http_www.runoob.com_react_react-state.html]: http://www.runoob.com/react/react-state.html