（一）认识React

╰半橙微兮° 2022-05-19 00:35 199阅读 0赞

## **一，React是什么？** ##

它是一个库，一个javascript库，

1，React的用处？

用于构建用户界面，通常被理解为MVC中的V；

2，React的用例？

3，HTML模板：

<!DOCTYPE html>
    <html>
      <head>
        <script src="../build/react.js"></script>            //React核心库
        <script src="../build/react-dom.js"></script>        //提供与DOM相关的功能
        <script src="../build/browser.min.js"></script>      //将JSX语法转换为JavaScript语法，耗            
                                                               时，一般在上线时在服务器上进行
      </head>
      <body>
        <div id="example"></div>
        <script type="text/babel">                           //React独有的JSX语法,跟JavaScript     
                                                               不兼容。凡是使用 JSX 的地方，都要加 
                                                               上 type="text/babel"
          // ** Our code goes here! **
        </script>
      </body>
    </html>

$ babel src --out-dir build

上面命令可以将 `src` 子目录的 `js` 文件进行语法转换，转码后的文件全部放在 `build` 子目录。

## **二，ReactDOM.Render（）** ##

1，Render：渲染的意思

2，它是React中最基本的语法，他将模板转换为HTML，并插入到DOM中，

## **三，JSX 语法** ##

var names = ['Alice', 'Emily', 'Kate'];
    
    ReactDOM.render(
      <div>
      {
        names.map(function (name) {
          return <div>Hello, {name}!</div>  //遇到 HTML 标签（以 < 开头），就用 HTML 规则解析
                                            //遇到代码块（以 { 开头），就用 JavaScript 规则解析
        })
      }
      </div>,
      document.getElementById('example')
    );

四，组件

1，React允许将代码块封装成组件（component），然后像插入普通HTML标签一样进行使用，

2，创建组建的方法：React.createClass方法；

var HelloWorld = React.createClass({
        render:function(){
            return <h1>hello world {this.props.name}</h1>
        }
    });
    
    ReactDom.render(
        <HelloWorld name="Tal"/>,
        document.getElementById('divId')
    );

注意：

1，HelloWorld就是一个组件类；

2，程序执行到<HelloWorld/>标签时，会生成一个HelloWorld的一个实例，也就是组件。

3，所有的组件都有一个render方法，用输出组件

4，组件类的第一个字母必须大写，否则会报错。

5，组件类必须只能包含一个顶层表签，否则会报错。

6，加载组件时以为组件添加属性，例如name属性，组件类可通过this.props.name获取该属性值；

7，添加class属性时需写成className，for写成htmlFor，这是应为这两个属性时JavaScript的保留字；

## **五，this.props.children** ##

`this.props.children` 属性。它表示组件的所有子节点;

注意;

使用这个方法时 this.props.children；

1，如何当前没有子节点，返回uindefined；

2，如果有一个，返回Object数据类型；

3，如果有多个，返回Array数据类型；

React 提供一个工具方法 [`React.Children`][React.Children] 来处理 `this.props.children` 。我们可以用 `React.Children.map` 来遍历子节点，而不用担心 `this.props.children` 的数据类型是 `undefined` 还是 `object`。

## 六、PropTypes ##

它是用来验证足组件实例的属性是否符合要求。

## 七、获取真实的DOM节点 ##

1，组件是存在于内存的数据结构，并不是真正的dom节点，他被称为虚拟DOM，只有当他插入文本以后才会变成真正的DOM，

2，根据React的设计，所有的改动都发成在虚拟DOM上，然后再反应在真实的DOM上，这种算法叫做DOM diff；

3，如果用到真实的DOM节点，React提供了ref属性；（当获取用户输入的内容的时候，就需要获取到真实节点）

var MyComponent = React.createClass({
        hanldeClick: function(){
            this.refs.myTextInput.focus();
        },
        
        render: function(){
            return (
                <div>
                    <input type="text" ref="MyTextInput" />
                    <input type="button" value="Focus the text input" onClick={this.handleClick} />
                </div>
               )
        }
    })
    
    ReactDOM.render(
        <Mycomponent />,
        document.getElementById('divId')
    );

注意：

需要注意的是，由于 `this.refs.[refName]` 属性获取的是真实 DOM ，所以必须等到虚拟 DOM 插入文档以后，才能使用这个属性，否则会报错。上面代码中，通过为组件指定 `Click` 事件的回调函数，确保了只有等到真实 DOM 发生 `Click` 事件之后，才会读取 `this.refs.[refName]` 属性。

## **八，this.state** ##

1，组件需要与用户互动，

2，state可以看成React的状态机，

3，开始是有一个初始状态，与用户互动后，获得新的状态并重新渲染UI

4，`this.setState` 方法就修改状态值，每次修改以后，自动调用 `this.render` 方法，再次渲染组件。

5，this.props和this.state的区别；

（1），props用来获取不能修改的属性；

（2），state用来获取与用户交互的属性；

## 九、表单 ##

用户在表单填入的内容，属于用户跟组件的互动，所以不能用 `this.props` 读取

1,文本输入框的值，不能用 `this.props.value` 读取;

2,要定义一个 `onChange` 事件的回调函数，通过 `event.target.value` 读取用户输入的值;

3,`textarea` 元素、`select`元素、`radio`元素都属于这种情况，

## 十、组件的生命周期 ##

1,组件周期的三个状态：

（1），Mountiong：已插入真实DOM；

（2），Updating：正在被渲染；

（3），UnMounting：已移除真实DOM；

2，每个状态有两个处理函数：will进入状态之前调用，did进入状态之后调用。

（1），componentWillMount()

（2），componentDidMount()

（3），componentWillUpdate(object nextProps, object nextState)

（4），componentDidUpdate(object prevProps, object prevState)

（5），componentWillUnmount()

3，此外React还提供两种特殊的状态：

（1），componentWillReceiveProps(Object nextProps):已加载组件收到新的参数时调用；

（2），shouldComponentUpdate(Object nextProps,Object nextState):判断组件是否重新渲染时调用；

4，例子：

上述代码在Hello组件加载后，通过componentDidMount方法设置一个定时器，每个100毫秒就重设置逐渐的透明度，从而引发重新渲染。

另外，组件的`style`属性的设置方式也值得注意，不能写成

>     style="opacity:{this.state.opacity};"

而要写成

>     style={
>         {opacity: this.state.opacity}}

这是因为 [React 组件样式][React]是一个对象，所以第一重大括号表示这是 JavaScript 语法，第二重大括号表示样式对象。

## 十一、Ajax ##

1，组件的数据来源，是通过Ajax从服务器上获取的；

2，可以通过componentDidMount方法来设置Ajax请求；

3，等待请求成功后，再用this.state的方法重新渲染组建；

4，例如

[React.Children]: https://facebook.github.io/react/docs/top-level-api.html#react.children
[React]: https://facebook.github.io/react/tips/inline-styles.html