初识React

来源：互联网发布：淘宝网服装货源编辑：程序博客网时间：2024/06/02 08:22

初识React

1.React简介

其实关于React的简介，不太需要知道React的作者，历史，创作时间，我们只需要知道为什么React会流行起来，它相比原先的框架有什么优点，这些东西需要我们真正去使用了，才会知道，作为一个初学者我不用急着弄懂它。

2.JSX语法

<!DOCTYPE html><html>  <head>    <script src="../build/react.js"></script>    <script src="../build/react-dom.js"></script>    <script src="../build/browser.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>

以上代码摘自阮一峰的react demos第一个demo，与一般的html文件有区别的地方就是那个很不和谐的ReactDOM.Render语句。所以一起来分析一下它。

首先，为什么在js中可以使用html？这就是要下面要提到的JSX语法。

JSX的语法类似html，在ReactDOM.Render写下需要渲染的dom即可。需要注意的是，需要使用div包裹，当然JSX代码也可以放在独立的js文件中，这也是为什么会有component文件夹一说。

ReactDom.render(    <div>        <h1>{1+1}</h1>    </div>    ,    document.getElementById('example'););

在JSX中使用js语法需要加上花括号，结果会输出2。

ReactDom.render(    <div>        <h1>{i == 1 ? 'True!' : 'False' }</h1>    </div>    ,    document.getElementById('example'););

JSX中不能使用if else语句，只能使用三元式。

var myStyle = {    fontSize: 100,    color: '#FF0000'};ReactDom.render(    <div>        <h1 style={myStyle}>我的样式</h1>    </div>    ,    document.getElementById('example'););

JSX中使用内联bi样式的写法。

ReactDom.render(    <div>        <h1>我的React笔记</h1>        {/*注释*/}    </div>    ,    document.getElementById('example'););

注释需要加花括号。

var arr = {    <h1>这是h1</h1>,    <h2>这是h2</h2>};ReactDom.render(    <div>        <h1>{arr}</h1>    </div>    ,    document.getElementById('example'););

数组的简单使用。

组件名一定要大写，React可以通过大小写来区分是渲染html还是React组件。

3.React组件

根据书中的描述，React中的组件包括属性（props），状态（state）和生命周期方法。但本节讨论的是React的组件的构建方法。

真的不能理解书中为什么把组件的知识写得如此的晦涩难懂，只能先参考阮一峰的教程了。先看demo4：

<!DOCTYPE html><html>  <head>    <script src="../build/react.js"></script>    <script src="../build/react-dom.js"></script>    <script src="../build/browser.min.js"></script>  </head>  <body>    <div id="example"></div>    <script type="text/babel">      var HelloMessage = React.createClass({        render: function() {          return <h1>Hello {this.props.name}</h1>;        }      });      ReactDOM.render(        <HelloMessage name="John" />,        document.getElementById('example')      );    </script>  </body></html>

React 允许将代码封装成组件（component），然后像插入普通 HTML 标签一样，在网页中插入这个组件。React.createClass 方法就用于生成一个组件类.。所有组件都必须有自己的render方法用于输出组件，组件类的第一个字母必须大写，另外，组件类只能包含一个顶层标签。

还有一个值得注意的地方就是this.props.name。组件的属性可以在组件类的this.props 对象上获取，比如 name 属性就可以通过 this.props.name 读取，这个之后还会细说。

4.React数据流

书中的描述复述一遍：在React中，数据是自顶向下流动的，即父组件到子组件。State和props是React中最重要的概念。如果顶层组件初始化props，那么React会向下遍历整棵组件树，重新尝试渲染相关组件。而state只关心每个组件的内部状态，这些状态只能在组件内改变。把组件看作一个函数，它接受了props作为参数，内部有state作为函数的内部参数，返回一个Virtural DOM的实现。

关于props和state的描述，感觉书中写的不够清晰简明（其实是没大看懂），所以这里借鉴一些明明的博客中的描述。

4.1 props

我首先想知道的是props用在什么情况，用在那些地方？正如上一节中所述，props是用在组件中的用于父组件和子组件进行“沟通的”，props是通过在组件内部使用this.props来访问的，props是组件唯一的数据来源，对于组件来说，props永远是只读的，不要尝试用this.setProps来修改props。[摘自]https://www.qcloud.com/community/article/158

设置props：

<MyTitle title={data} />

读取props：

var MyTitle = React.createClass({    propTypes: {        title: React.PropTypes.string.isRequired,    },    render: function() {        return <h1> {this.props.title} </h1>;    }});

4.2 state

React的一大创新，就是把每一个组件都看成是一个状态机，组件内部通过state来维护组件状态的变化，这也是state唯一的作用。下面看demo8：

var LikeButton = React.createClass({  getInitialState: function() {    return {liked: false};  },  handleClick: function(event) {    this.setState({liked: !this.state.liked});  },  render: function() {    var text = this.state.liked ? 'like' : 'haven\'t liked';    return (      <p onClick={this.handleClick}>        You {text} this. Click to toggle.      </p>    );  }});

getInitial是初始化状态变量的，在p上绑定点击事件handkeClick来实现页面渲染后对更新操作。

5. React生命周期

简单来说，React的生命周期分为实例化，存在期和销毁期。

实例化期

getDefaultProps:
对于组件来说，这个方法只会调用一次，对于那些没有父辈组件指定的props属性的新建实例来说，这个方法返回的对象可用与为实例设置默认的props值。
getInitialState():
对于组件的每个实例来说，这个方法调用次数有且仅有一次，这里你将有机会初始化每个实例的state,与getDefaultProps方法不同的是，每次实例创建时该方法都会被调用一次，这个方法中，可以访问到this.props.
constructor():
初始化的构造函数。
componentWillMount():
在render方法之前执行；
render():
在这里你创建一个虚拟DOM，用来表示组件的输出，对于一个组件来说，render是唯一一个必需的方法，并且有特定的规则。render方法选要满足下面几点：
1.只能通过this.props和this.state访问数据；
2.可以返回null，false或者任何React组件；
3.只能出现一个顶级组件（不能返回一组元素）；
4.必须纯净，有位置不能改变组件状态或者修改DOM输出。
componentDidMount()：
在render方法之后执行；

存在期

componentWillReceiveProps(nextProps)：
任何时刻组件的props都可以通过父辈组件来更改，出现这种情况时，componentWillReceiveProps方法会被调用，你将获得更改props方法及跟他关心state的机会。例如：

componentWillReceiveProps:function(nextProps){if(nextProps.checked！==undefined）{this.setState({checked:nextProps.checked});}}

shouldComponentUpdate():
调用shoulecomponentUpadte方法在组件渲染时进行精确优化。如果某个组件或者它的任何子组件不需要渲染成新的props或则和state，则该方法返回false，返回false则是说明React要跳到render方法，一届位于render前后的钩子函数：componentWillUpadate和componentDidUpdate。
该方法非必需的，并且大部分情况没有必要使用它。
componentWillUpdate():
和componentwillMount:方法类似，组建会在收到新的props或者state进行渲染之前调用该方法。
注意：你不可以在该方法中更新huo或者props。而应该借助componentWillreceiveProps方法在运行时更新state。
componentDidUpdate():
和componentDidMount方法类似，该方法给我们更新已经渲染好的DOM机会。

销毁期

componentWillUnmount():
最后，随着组件从他的层级结构中移除，这个组件的生命也就走id熬了尽头，该方法会在组件被移除之前调用，让你有机会做一些清理工作。在componentDidMount方法中添加的所有任务都需要在该方法中撤销，比如创建的定时器或者添加的事件监听器。

6.React 与 DOM

回到demo1:

<!DOCTYPE html><html>  <head>    <script src="../build/react.js"></script>    <script src="../build/react-dom.js"></script>    <script src="../build/browser.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>

ReactDOM

怎样把模板翻译成HTML语句并插入DOM节点？这就需要靠React的对象ReactDOM的方法，ReactDOM的方法比较少：
- findDOMNode
这个方法可以使我们获取当前的DOM实例，是在组件第一次渲染之后的componentDidMount()或者componentDidUpdate()中可以使用；
- render
这个就是demo中最常用的方法，它的作用就是把虚拟的DOM渲染到浏览器的DOM中。

refs
给组件或者是dom元素定义ref属性，然后可以通过

this.refs.ref属性值访问组件实例

阅读全文

0 0