学习react教程

2022-09-22 08:03:39

网址收藏: React官网，React的Github，React的中文文档

1.react是什么？

React起源于Facebook的内部项目，因为该公司对市场上所有的Javascript MVC框架都不满意，决定自己写一套，用来架设Instargm的网站。做完以后，发现很好用，就在2013年5月开源。

2.安装react

全局安装react脚手架工具npm install create-react-app -g
安装阮一峰老师的教程 git clone git@github.com:ruanyf/react-demos.git下载下来

3.react特性

重点：组件，状态

核心：状态

4.语法。

4.1 html模板

<!DOCTYPE html>

<html>

  <head>

    <!-- 这是核心js -->

    <script src="../build/react.js"></script>

    <!-- 这是处理虚拟dom相关的js -->

    <script src="../build/react-dom.js"></script>

    <!-- 这是把JSX语法转换为js语法 （注意：JSX就是可以把html写在js里面。） -->

    <script src="../build/browser.min.js"></script>

  </head>

  <body>

    <div id="example"></div>

    <!-- 这里加type就是告诉游览器，这里使用的是JSX语法模板。 -->

    <script type="text/babel">

      //这里写

    </script>

  </body>

</html>

4.2 ReactDOM.render()

React最基本的方法，用于把模板转换成html语言，并且插入指定的节点。

例如：

ReactDOM.render(

    <h2>Welcome to React World!</h2>,

    document.getElementById('myapp')

)

4.3 JSX语法

JSX是可以在js中写html，遇到html标签（例如：<）就用html解析，遇到代码块（例如：{）就用javascript规则解析。

例如：

<!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>

    <div id="food"></div>

    <script type="text/babel">

      var names = ['Alice', 'Emily', 'Kate'];

      var foods = ['meal','sala','milk'];

      ReactDOM.render(

        <div>

        {

          names.map(function (name, index) {

            return <div key={index}>Hello, {name}!</div>

          })

        }

        </div>,

        document.getElementById('example')

      );

      ReactDOM.render(

        <div>

        {

          foods.map(function (food, index) {

              return <div key={index}>I like eat {food}!</div>

          })

        }

        </div>,

        document.getElementById('food')

      )

    </script>

  </body>

</html>

4.4 组件 React.createClass()

React允许将代码封装成组件(component)，然后把它当成html标签插入到网页中。React.createClass()就是可以创建一个组建类。

例如：

<!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="foods"></div>

    <script type="text/babel">

      var LikeFood = React.createClass({  //创建组件类

        render: function() {

          return <p>I like eat <mark>{this.props.name}</mark></p>;

        }

      });

      ReactDOM.render(

        <LikeFood name="Apple"/>,

        document.getElementById('foods')

      )

    </script>

  </body>

</html>

4.5 this.props.children

this.props对象的属性与组件的属性基本上是一致的，特殊在于this.props.children属性，它表示组件的所有子节点。

注意： this.props.children有三个可能，如果当前组件没有子节点，就是显示undefined;如果有一个子节点，数据类型就是object；如果有多个子节点，就是array，所以要小心。

但React提供了一个方法遍历所有子节点，React.Children,通过this.props.children来遍历。

<!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="foods"></div>

    <script type="text/babel">

        var FoodList = React.createClass({

            render: function() {

            return (

                <ul>

                {

                    React.Children.map(this.props.children,function (child) {

                    return <li>{child}</li>;

                    })

                }

                </ul>

            )

            }

        })

        ReactDOM.render(

            <FoodList>

            <span>Hello,</span>

            <span>I like eat</span>

            <span>Apple!</span>

            </FoodList>,

            document.getElementById('foods')

        )

    </script>

  </body>

</html>

4.6 PropTypes

组件的属性可以接受任何值，如字符串，数字，数组，对象，函数，但是需要一种机制来验证使用组件提供的参数是否符合要求，PropTypes就是用来验证这个的。

<!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="foods"></div>

    <script type="text/babel">

      var str = 123;

      var MyNum = React.createClass({

        propTypes: {

          num: React.PropTypes.number.isRequired,

        },

        render: function() {

          return <h2>{this.props.num}</h2>

        }

      });

      ReactDOM.render(

        <MyNum num={str} />,

        document.getElementById('foods')

      )

    </script>

  </body>

</html>

补充：还可以添加默认值。'

getDefaultProps: function() {

    return {

    num: 1818

    }

}

例如：

<!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="foods"></div>

    <script type="text/babel">

      var str;

      var MyNum = React.createClass({

        getDefaultProps: function() {

            return {

                num: 1818

            }

        }

        propTypes: {

          num: React.PropTypes.number.isRequired,

        },

        render: function() {

          return <h2>{this.props.num}</h2>

        }

      });

      ReactDOM.render(

        <MyNum num={str} />,

        document.getElementById('foods')

      )

    </script>

  </body>

</html>

4.7 获取真实的DOM节点

组件并不是真的dom节点，只是存在内存中的数据结构，叫做虚拟DOM(virtual)。当它插入到文档以后，才会变成真实的DOM。

所有的DOM变动，先是在虚拟DOM上发生变动，然后再在实际发生变动的部分，反映在真实的DOM，这种叫做DOM diff,它可以极大提高网页的性能表现。

有时需要从组件获取真实的DOM的节点，这个时候就要用到ref属性。

注意：React还支持许多事件，更多请访问事件。

例如：

<!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="foods"></div>

    <script type="text/babel">

        var MyFoods = React.createClass({

          showContent: function() {

            this.refs.myFoodInput.focus();

          },

          render: function() {

            return (

              <div>

                <input type="text" ref="myFoodInput" />

                <input type="button" value="自动聚焦" onClick={this.showContent} />

              </div>

            )

          }

        })

        ReactDOM.render(

          <MyFoods />,

          document.getElementById('foods')

        )

    </script>

  </body>

</html>

4.8 this.state 状态管理

组件免不了要和用户互动，React的一大创新就是把组件看成是一个状态机，一开始有个初始状态，然后用户互动，导致状态变化，从而重新出发渲染UI。

注意： getInitialState 方法用于定义初始状态，但同时它是一个对象，这个可以通过this.state属性读取。

当用户点击组件，导致状态发生变化，this.setState 方法就会修改状态值，每次修改完，会自动调用this.render方法，再次渲染组件。

this.props和this.state都是描述组件的特性，但是不同的是this.props是指一旦定义好了，就不再发生变化的特性，而this.state是会随着用户互动而产生变化的特性。

例如：

<!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="foods"></div>

    <script type="text/babel">

      var FoodButton = React.createClass({

        getInitialState: function() {

          return {food: false};

        },

        callClick: function(event) {

          this.setState({food: !this.state.food});

        },

        render: function() {

          var text1 = this.state.food ? 'like eat apple' : 'hate eat apple';

          return (

            <p onClick={this.callClick}>

              You {text1}!

            </p>

          );

        }

      });

      ReactDOM.render(

        <FoodButton />,

        document.getElementById('foods')

      )

    </script>

  </body>

</html>

4.9 表单

用户在表单填入的内容，属于用户和组件之间的互动，所以不能用this.state，而要定义一个onChange事件的回调函数，通过event.target.value读取用户的值。

注意：textarea,select,radio都属于这种情况。

例如：

<!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="food"></div>

    <script type="text/babel">

      var Food = React.createClass({

        getInitialState: function() {

          return {val: 'Welcome to React!'};

        },

        hanChange: function(event) {

          this.setState({val:event.target.value});

        },

        render: function() {

          var val = this.state.val;

          return (

            <div>

              <input type="text" value={val} onChange={this.hanChange} />

              <p>{val}</p>

            </div>

          );

        }

      })

      ReactDOM.render(<Food />,document.getElementById('food'))

    </script>

  </body>

</html>

4.10 组件的生命周期

React中组件的生命周期分为三个状态，Mounting是已经插入真实DOM，Updating是正在被重新渲染，Unmounting是已移出真实DOM。

每个状态都有两种处理函数，will函数是进入状态之前，did函数是进入状态之后，三种状态共计五种函数。

注意：组件的样式style不能写成<div style={opacity: this.state.opacity}>，要写成<div style={{opacity: this.state.opacity}}>。

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

五种函数

componentWillMount()
componentDidMount()
componentWillUpdate(object nextProps, object nextState)
componentWillUpdate(object prevState, object prevState)
componentWillUnMount()

例如：第二种，在已插入真实DOM之后触发。

<!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="food"></div>

    <script type="text/babel">

      var Food = React.createClass({

        getInitialState: function() {

          return {

            opacity: 0

          }

        },

        componentDidMount: function() {

          this.timer = setInterval(function() {

            var opacity = this.state.opacity;

            opacity += .05;

            if (opacity > 1) {

              opacity = 0;

            }

            this.setState({

              opacity: opacity

            })

          }.bind(this),100);

        },

        render: function() {

          return (

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

              Hello, {this.props.title}

            </div>

          );

        }

      });

      ReactDOM.render(

        <Food title="apple"/>,

        document.getElementById('food')

      )

    </script>

  </body>

</html>

4.11 Ajax的使用

组件的数据来源一般都是通过Ajax请求从服务器获取，可以使用componentDidMount()方法设置Ajax请求，等到请求成功，再用this.setState方法重新渲染UI。

例如：

<!DOCTYPE html>

<html>

  <head>

    <script src="../build/react.js"></script>

    <script src="../build/react-dom.js"></script>

    <script src="../build/browser.min.js"></script>

    <script src="../build/jquery.min.js"></script>

  </head>

  <body>

    <div id="food"></div>

    <script type="text/babel">

      var ClientGits = React.createClass({

        getInitialState: function() {

          return {

            id: '',

            addr: ''

          };

        },

        componentDidMount: function() {

          $.get(this.props.source,function (result) {

            var gits = result[0];

            this.setState({

              id: gits.id,

              addr: gits.git_pull_url

            });

          }.bind(this));

        },

        render: function() {

          return (

            <div>

              UserId is <a href='#userId'>{this.state.id}</a>, Git Address is <a href={this.state.addr}>{this.state.addr}</a>!

            </div>

          );

        }

      });

      ReactDOM.render(

        <ClientGits source="https://api.github.com/users/octocat/gists" />,

        document.getElementById('food')

      )

    </script>

  </body>

</html>

注意：上面采用了jquery的Ajax，还可以采用其他的库。我们甚至可以把Promise对象传入组件。

例如：

<!DOCTYPE html>

<html>

  <head>

    <script src="../build/react.js"></script>

    <script src="../build/react-dom.js"></script>

    <script src="../build/browser.min.js"></script>

    <script src="../build/jquery.min.js"></script>

  </head>

  <body>

    <div id="projects"></div>

    <script type="text/babel">

        var Projects = React.createClass({

          getInitialState: function() {

            return {

              loading: true,

              error: null,

              data: null

            };

          },

          componentDidMount() {

            this.props.promise.then(

              value => this.setState({loading: false, data: value}),

              error => this.setState({loading: false, error: error})

            )

          },

          render: function() {

            if (this.state.loading) {

              return <span>Loading...</span>;

            } else if (this.state.error != null) {

              return <span>Error:{this.state.error.message}</span>;

            } else {

              var res = this.state.data.items;

              var resList = res.map(function (res,index) {

                return (

                  <li key={index}><a href={res.html_url} target="_blank">{res.name}</a>({res.stargazers_count} stars)<br/>{res.description}</li>

                );

              });

              return (

                <main>

                  <h1>Github上最受欢迎的JS项目</h1>

                  <ul>{resList}</ul>

                </main>

              );

            }

          }

        });

        ReactDOM.render(

          <Projects promise={$.getJSON('https://api.github.com/search/repositories?q=javascript&sort=stars')} />,

          document.getElementById('projects')

        )

    </script>

  </body>

</html>

码农公寓