React(1):调用、元素和组件、state和生命周期

目录

一、为什么需要React

二、reactdom.render的使用方式。

1.render的参数

二、JSX(JavaScript的扩展语法)

1.JSX的语法和使用

2.扩展知识：自动分号陷阱(JS的问题)

3.JSX可以防止注入攻击

4.JSX表示对象

三、React组件

1.两种组件

四、state和生命周期

1.state

2.生命周期

---

 

本博客持续更新中，从后端转战前端框架。

 

一、为什么需要React

https://blog.csdn.net/u012131835/article/details/85050415

这篇文章写的挺好，尤其需要理解浏览器的渲染机制和虚拟DOM。

二、reactdom.render的使用方式。

1.render的参数

reactdom.render(source,target)，该方法有两个形参(当然具体两个形参名称不是这样的)，第一个形参就是我们需要渲染的元素，第二个形参就是将第一个形参渲染到什么地方。例如：

<div id="example">原有元素</div>
<script type="text/babel">
    const element =<h1>Hello, world!</h1>;
    ReactDOM.render(
        element,
        document.getElementById('example')
    );
    <!--这个方法就是将element渲染到example这个div中-->
    <!--div中原本有“原有元素”这个文本，但是react在页面被加载时执行，“原有元素”就被element取代了-->
    <!--因此我们就看不到“原有元素”这个文本了-->
</script>

二、JSX(JavaScript的扩展语法)

1.JSX的语法和使用

const element = <h1>Hello, world!</h1>;
<!--这句既不是字符串赋值，又不是HTML的语句，就是JSX-->


const e1 = "world";<!--这是JS语句-->
const user = {userName:'liu',sex:1}<!--这是JS创建对象-->

<!--接下来是JSX调用JS数据等-->
<!--JSX使用{}调用JS的各式数据-->
const e2 = <h1>Hello, {e1}!</h1>;<!--直接调用JS的数据-->
const e3 = <h1>Hello, {user.userName}</h1><!--调用对象的属性-->
function formatName(user) {
  return user.userName + ' ' + user.sex;
}
const e4 = (
  <h1>
    Hello, {formatName(user)}!<!--在这里直接调用JS方法-->
  </h1>
);

2.扩展知识：自动分号陷阱(JS的问题)

function f1(){//这个函数将会返回一个对象，就是我们定义的
    return {
        key1:1,
        key2:2
    };
}
function f2(){//这个函数将会返回undefined,因为JS会在return后面添加一个;
    return
    {
        key1:1,
        key2:2
    };
}
function f3(){//这个函数就跟f2效果是一样的
    return;//注意f2和f3这里分号的区别
    {
        key1:1,
        key2:2
    };
}

JSX避免这个问题，就使用（）的形式对数据进行包裹起来，例如：

const e4 = (
    <div>
       <p>注意自动分号陷阱，使用()包裹起来</p>
    </div>
);

3.JSX可以防止注入攻击

React DOM 在渲染所有输入内容之前，默认会进行转义。它可以确保在你的应用中，永远不会注入那些并非自己明确编写的内容。所有的内容在渲染之前都被转换成了字符串。这样可以有效地防止 XSS（cross-site-scripting, 跨站脚本）攻击。

4.JSX表示对象

//使用React.createElement创建对象
const e5 = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);
//这两种形式效果是一样的
const e6 = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);
//这是定义一个React元素，该元素的名称为e6
const e6 = <div>hello world!</div>

三、React组件

1.两种组件

组件共分为函数组件和class组件，在介绍两种组件之前，组件有一个特性，只接受一个“props”参数，其他值都通过props访问得到。

当 React 元素为用户自定义组件时，它会将 JSX 所接收的属性（attributes）转换为单个对象传递给组件，这个对象被称之为 “props”。props属性是一个只读属性。

下面介绍区别。

<!--这是定义一个React元素，该元素的名称为e6-->
const e6 = <div>hello world!</div>;

<!--接下来定义函数组件-->
function MyComponent(props){
    return //这里有自动分号陷阱，不能直接这么写
    <div>props中的属性是我们之后传入的参数，这里调用看一下{props.name}</div>;
}
<!--接下来定义class组件，这定义方式，实际上是一样的-->
class MyComponent extends React.Component{
    render(){
        return <div>props中的属性是我们之后传入的参数，这里调用看一下{props.name}</div>;
    }
}
<!--接下来使用这两个组件，也是同一个组件,将其赋值给一个元素e7-->
<!--e7 = <div>props中的属性是我们之后传入的参数，这里调用看一下world</div>;-->
const e7 = <MyComponent name="world"></MyComponent>;

React组件建议使用大写字母开头命名自定义组件，以小写字母开头，例如：<div>,<span>是HTML原生标签。

四、state和生命周期

1.state

state是组件的内部属性,通过调用this.setState()对state进行修改，并且this.setState()被调用的时候，React会重新调用render方法来重新渲染UI。

//运行流程在最下面
class Clock extends React.Component {
  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() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

ReactDOM.render(
  <Clock />,
  document.getElementById('root')
);
/*1.当 <Clock /> 被传给 ReactDOM.render()的时候，React 会调用 Clock 组件的构造函数。因为 Clock 需要显示当前的时间，所以它会用一个包含当前时间的对象来初始化 this.state。我们会在之后更新 state。

2.之后 React 会调用组件的 render() 方法。这就是 React 确定该在页面上展示什么的方式。然后 React 更新 DOM 来匹配 Clock 渲染的输出。

3.当 Clock 的输出被插入到 DOM 中后，React 就会调用 ComponentDidMount() 生命周期方法。在这个方法中，Clock 组件向浏览器请求设置一个计时器来每秒调用一次组件的 tick() 方法。

4.浏览器每秒都会调用一次 tick() 方法。 在这方法之中，Clock 组件会通过调用 setState() 来计划进行一次 UI 更新。得益于 setState() 的调用，React 能够知道 state 已经改变了，然后会重新调用 render() 方法来确定页面上该显示什么。这一次，render() 方法中的 this.state.date 就不一样了，如此以来就会渲染输出更新过的时间。React 也会相应的更新 DOM。

5.一旦 Clock 组件从 DOM 中被移除，React 就会调用 componentWillUnmount() 生命周期方法，这样计时器就停止了。*/

注意事项：

（1）建议不要直接修改state中的值，不推荐：this.state.value = newValue;应该使用setState方法对state修改，因为，调用此方法，会重新渲染一次UI，达到状态更新的效果。

this.setState({comment: 'Hello'});//这是推荐的方法，尽量使用这种方法。

（2）React 可能会把多个 setState() 调用合并成一个调用。

（3）插播小知识(JS的then()函数的用法)

then()方法就是在前面方法执行完之后执行的方法，具体看下面博客，写挺好。

https://blog.csdn.net/chengmo123/article/details/89281022

2.生命周期

当 Clock 组件第一次被渲染到 DOM 中的时候，这在 React 中被称为“挂载（mount）”。（调用componentDidMount()函数）

同时，当 DOM 中 Clock 组件被删除的时候，这在 React 中被称为“卸载（unmount）”。（调用componentWillUnmount()函数）