React学习笔记

最新推荐文章于 2020-09-23 14:07:20 发布

始之终

最新推荐文章于 2020-09-23 14:07:20 发布

阅读量179

点赞数

分类专栏：前端学习文章标签： React

本文链接：https://blog.csdn.net/qq_38736310/article/details/86679310

版权

前端学习专栏收录该内容

1 篇文章 0 订阅

订阅专栏

ES6在浏览器支持的普及率：https://kangax.github.io/compat-table/es6/
Node对ES6支持度更高，默认不打开需使用命令打开：http://es6.ruanyifeng.com/#docs/intro#部署进度
Babel转码器：将ES6代码转换为ES5，其配置参考：http://es6.ruanyifeng.com/#docs/intro#Babel-转码器
在线的ES6转码ES5：https://babeljs.io/repl/

相关js引入：https://github.com/ruanyf/react-demos
模板:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <script src="../build/react.development.js"></script>
    <script src="../build/react-dom.development.js"></script>
    <script src="../build/babel.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
      // ** Our code goes here! **
    </script>
  </body>
</html>

1.了解并使用React

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('example')
);

2.通过React遍历数组

使用遍历，不能少key这个属性，要设置的，否则报错

 <script type="text/babel">
    var names = ['A', 'B', 'C'];
    ReactDOM.render(
      <div>
        {
          names.map(function (name, index) {
            return <div key={index}>Hello, {name}!</div>
          })
        }
      </div>,
      document.getElementById("example")
    )
 </script>

3.通过React输出数组

 <script type="text/babel">
    var arr = [
      <h1 key='1'>Hello World!</h1>,
      <h2 key='2'>React is awesome</h2>,
    ];
    ReactDOM.render(
      <div>{arr}</div>,
      document.getElementById('example')
    );
 </script>

4.通过React编写简单组件并应用this.props.name

组件用于属性，并通过this.props.[attribute]访问；组件仅有一个顶级子节点，命名应该首字母大写

  <script type="text/babel">
    class HelloMessage extends React.Component{
      render(){
        return <h1>Hello {this.props.name}</h1>;
      }
    }

    ReactDOM.render(
      <HelloMessage name="John" />,
      document.getElementById('example')
    )
  </script>

页面输出结果：Hello John

5.编写简单组件，并应用this.props.chilren

如直接调用this.props.chilren，可能会出现三种可能，无子节点则为undefined;单节点则为对象；多节点则为数组；
通过React.Children处理可不必判断处理

<script type="text/babel">
    class NotesList extends React.Component{
      render () {
        return (
          <ol>
            {
              React.Children.map(this.props.children, function (child) {
                return <li>{child}</li>;
              })
            }
          </ol>
        );
      }
    }
    ReactDOM.render(
      <NotesList>
        <span>hello</span>
        <span>world</span>
      </NotesList>,
      document.getElementById('example')
    );
</script>

6.编写简单组件，并应用static关键字，设置必须项

<script type="text/babel">
    var data = 123;

    class MyTitle extends React.Component{
      static propTypes = {
        title: PropTypes.string.isRequired, 
      }
      render (){
        return <h1>{this.props.title}</h1>;
      }
    }

    ReactDOM.render(
      <MyTitle title={data} />,
      document.getElementById('example')
    );
</script>

如果该必填项值为无效值，则控制台会报错，要提供默认值，则使用defaultProps

<script type="text/babel">
    var data;

    class MyTitle extends React.Component{
      constructor (props){
        super(props);
      }
      static defaultProps = {
        title: 'test'
      }
      static propTypes = {
        title: PropTypes.string.isRequired, 
      }
      render (){
        return <h1>{this.props.title}</h1>;
      }
    }

    ReactDOM.render(
      <MyTitle title={data} />,
      document.getElementById('example')
    );
</script>

7.引用props，并新增其属性，调用方法

<script type="text/babel">
    class MyComponent extends React.Component {
      constructor(props){
        super(props);
        this.myTextInput = React.createRef();
        this.handleClick = this.handleClick.bind(this)
      }
      handleClick (){
        this.myTextInput.current.focus();
      }
      render (){
        return (
          <div>
            <input type="text" ref={this.myTextInput} /> 
            <input type="button" value="确认" onClick={this.handleClick} />
          </div>
        )
      }
    }
    ReactDOM.render (
      <MyComponent />,
      document.getElementById('example')
    );
</script>

上述操作，是扩展组件porps并安装再操作
8.this.state
this.state可以用来保存组件的状态，this.setState()用来更新this.state和重新展示组件

<script type="text/babel">

    class LikeButton extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          liked: false
        }
        this.handleClick = this.handleClick.bind(this);
      }
      handleClick(event){
        this.setState ({likd: !this.state.liked})
      }
      render (){
        var text = this.state.liked ? 'like' : 'havn\'t liked';
        return(
          <p onClick={this.handleClick}>
            You {text} this.Click to toggle;
          </p>
        )
      }
    }
    ReactDOM.render(
      <LikeButton />,
      document.getElementById('example')
    );
</script>

可以通过this.state的注册事件来处理程序了
9.表格
通过React的更新改变事件onChange，来变更输入的值

<script type="text/babel">
    class Input extends React.Component {
      constructor(props){
        super(props);
        this.state = {
          value: 'Hello!'
        }
        this.handleChange = this.handleChange.bind(this);
      }
      handleChange (event){
        this.setState({value: event.target.value})
      }
      render (){
        var value = this.state.value;
        return (
          <div>
            <input type="text" value={value} onChange={this.handleChange} />
          </div>
        )
      }
    }
    ReactDOM.render(
      <Input />,
      document.getElementById('example')
    );
</script>

10.组件的生命周期
分为：挂载（插入DOM）、更新（重新展示）、卸载（DOM中删除）
React为这些生命周期都提供了钩子，did表示在事件发生之前；will则在事情方式后立即调用

<script type="text/babel">
    class Hello extends React.Component {
      constructor (props){
        super(props);
        this.state = {
          opacity: 1.0
        }
      }
      ComponentDidMount (){
        this.timer = setInterval(function(){
          var opacity = this.state.opacity;
          opacity -= .05;
          if (opacity < 0.1){
            opacity = 1.0;
          }
          this.setSate({
            opacity: opacity
          });
        }.bind(this), 1000);
      }
      render (){
        return (
          <div style={{opacity: this.state.opacity}}>
            Hello {this.state.opacity}
          </div>
        )
      }
    }
    ReactDOM.render(
      <Hello />,
      document.getElementById('example')
    );
</script>

React组件生命周期方法：
componentWillMount（）：在初始渲染发生之前触发一次。连接消息监听器的好地方。this.setState在这里不起作用。
componentDidMount（）：在初始渲染发生后触发一次。可以用this.getDOMNode()。
componentWillUpdate（object nextProps，object nextState）：在组件对DOM进行更新后触发。可以this.getDOMNode()用于更新。
componentDidUpdate（object prevProps，object prevState）：在将组件的更新刷新到DOM之后立即调用。初始渲染不会调用此方法。将此作为在更新组件时对DOM进行操作的机会。
componentWillUnmount（）：在从DOM卸载组件之前立即触发。删除消息监听器或一般清理的好地方。
componentWillReceiveProps（object nextProps）：当组件接收新道具时触发。你可能想要this.setState依赖道具。
shouldComponentUpdate（object nextProps，object nextState）：在收到新的props或state时呈现之前触发。return false如果你知道不需要更新。
11.Ajax请求
通过componentDidMount方法进行请求，将数据存储到this.setState()中触发刷新渲染

<script type="text/babel">
    class UserGist extends React.Component {
      constructor(props){
        super(props);
        this.state = {
          username: "",
          lastGistUrl: ''
        }
      }
      componentDidMount(){
        $.get(this.props.source, function(result){
          var lastGist = result[0];
          this.setState({
            username: lastGist.owner.login,
            lastGistUrl: lastGist.html_url
          });
        }.bind(this));
      }
      render (){
        return(
          <div>
            {this.state.username}'s last gist <a href={this.state.lastGistUrl}>here</a>
          </div>
        );
      }
    }
    ReactDOM.render(
      <UserGist source="https://api.github.com/users/octocat/gists" />,
      document.getElementById('example')
    );
 </script>

12.通过异步请求展示所需数据

<script type="text/babel">
   class RepoList extends React.Component {
     constructor(props){
       super(props);
       this.state = {
         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(){
       console.log(this.state);
       if (this.state.loading){
         return <span>Loading...</span>;
       }
       else if (this.state.error != null){
         return <span>Error: {this.state.error.message} </span>
       }
       else {
         var repos = this.state.data.items;
         var repoList = repos.map(function (repo,index){
           return(
             <li key={index}>
               <a href={repo.html_url}>{repo.name}</a>
               ({repo.stargazer_count} stars)<br />
               {repo.description}
             </li>
           )
         });
         return(
           <main>
             <h1>Most Popular JavaScript Projects in Github</h1>
             <ol>{repoList}</ol>
           </main>
         );
       }
     }
   }
   ReactDOM.render(
     <RepoList promise={$.getJSON('https://api.github.com/search/repositories?q=javascript&sort=stars')} />,
     document.getElementById('example')
   );
</script>

13.服务器渲染
参考github.com/mhart/react-server-example
npm install
npm run build
npm server.js