react入门

最新推荐文章于 2023-03-21 22:49:02 发布
「已注销」
最新推荐文章于 2023-03-21 22:49:02 发布
阅读量255
点赞数
分类专栏：前端
本文链接：https://blog.csdn.net/jianruoche/article/details/78687057
版权
前端专栏收录该内容
13 篇文章 0 订阅
订阅专栏
<head>
  <meta charset="UTF-8">
  <title>react</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    
    body {
      background: #e6e3e3;
    }
    
    .main {
      border: 1px solid red;
      background: white;
      margin: 50px auto;
      width: 1000px;
      padding: 20px;
    }
    
    h3 {
      color: red;
      font-size: 20px;
    }
    
    pre {
      font-size: 16px;
      line-height: 2em;
      white-space: pre-wrap;
      word-wrap: break-word;
    }

    .alert-text{
      font-size: 20px;
    }
  </style>
</head>
<body>
  <div class="main">
    <section>
      <h3>一.react简介</h3>
      <pre>
        react是用于用户界面构建的JavaScript库，由Facebook公司开发。解决的问题：We built React to solve one problem: building large applications with data that changes over time.
        即react是为了解决: 构建随着时间数据不断变化的大规模应用程序而设计的用来构建用户界面的JavaScript库，是MVC中的V（视图）.
      </pre>
    </section>
    <section>
      <h3>二.react主要特点</h3>
      <pre>
        高效(virtual DOM)：不直接操作DOM对象，而是通过虚拟DOM，通过diff算法以最小的步骤作用到真实的DOM上，最大限度地减少与DOM的交互。
        单向响应的数据流：从数据到视图的渲染。
        组件化：通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。
        JSX语法：HTML 语言直接写在 JavaScript 语言之中，不加任何引号，它允许 HTML 与 JavaScript 的混写
      </pre>
    </section>
    <section>
      <h3>三.react基本使用</h3>
      <pre>
        1.引入相关js
          react.js: 是 React 的核心库
          react-dom.js: 是提供与 DOM 相关的功能
          Browser.js:的作用是将 JSX 语法转为 JavaScript 语法
        2.在html创建一个根元素，用来加载react的组件
          < div id="app">< /div>
        3.在js中使用render（）将模板转为HTML语言，并插入指定的DOM节点
          ReactDOM.render(
            < h1>Hello, world!< /h1>,
            document.getElementById('app')
          );
      </pre>
    </section>
    <section>
      <h3>四.jsx语法</h3>
      <pre>
        允许html和js混合编写的一周语法。浏览器是不认识他的，所以就需要解析。
        eg1.
          < h1>Hello, world!< /h1>
        eg2.
          var flag = true;
          < div>
            { flag ? 1 : 0}
          < /div>
        jsx的基本语法规则是：遇到 HTML 标签（以 < 开头），就用 HTML 规则解析；遇到代码块（以 { 开头），就用 JavaScript 规则解析
      </pre>
    </section>
    <section>
      <h3>五.react组件</h3>
      <pre>
        1.react组件的基本使用：组件名必须大写，为了和html标签区分
          var HelloMessage = React.createClass({
            render: function() {
              return < h1>Hello World！< /h1>;
            }
          });
          
          ReactDOM.render(
            < HelloMessage />,
            document.getElementById('app')
          );
        
        2.向组件传值
          var HelloMessage = React.createClass({
            render: function() {
              return < h1>Hello {this.props.name}< /h1>;
            }
          });
          
          ReactDOM.render(
            < HelloMessage name="haha"/>,
            document.getElementById('app')
          );
        3.子组件
          var Message = React.createClass({
            render: function() {
              return (
                < div>   //最外层只能有一个元素，而且渲染出来的html是包含这个元素的
                  < div>
                    < Name name={this.props.name} />     //父组件传值给子组件
                    < Link site={this.props.link} />
                  < /div>
                < /div>
              );
            }
          });
          
          var Name = React.createClass({
            render: function() {
              return (
                < h1>{this.props.name}< /h1>
              );
            }
          });
          
          var Link = React.createClass({
            render: function() {
              return (
                < a href={this.props.link}>
                  {this.props.link}
                < /a>
              );
            }
          });
          
          ReactDOM.render(
            < Message name="haha" link="https://www.baidu.com/" />,
            document.getElementById('app')
          );
      </pre>
    </section>
    <section>
      <h3>六.react状态有与属性，事件监听</h3>
      <pre>
        react 把组件看成是一个状态机（State Machines）。通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。
        react 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面（不要操作 DOM）。
        
        state的基本使用
          var HelloMessage = React.createClass({
            getInitialState: function() { //初始化状态
              return {name: 'haha'};
            },
            getDefaultProps: function() { ／／初始化属性
              return {
                name: 'heiehi'
              };
            },
            handleClick: function(event) {
              this.setState({name: 'heihei'});   //改变状态
            },
            render: function() {
              return < h1 onClick={this.handleClick}>Hello {this.state.name}！{this.props.name}< /h1>;  ／／事件监听
            }
          });
          
          ReactDOM.render(
            < HelloMessage />,    //也可以在这里直接设置属性
            document.getElementById('app')
          );
        
        state 和 props 主要的区别在于 props 是不可变的，而 state 可以根据与用户交互来改变。
      </pre>
    </section>
    <section>
      <h3>七.组件间的传值</h3>
      <pre>
        参考：http://blog.csdn.net/guangyao88/article/details/71713806
        1.父传子---利用 props直接传值
        
        2.子传父---主要原理，父组件把事件处理函数以属性的方式传递给子组件，在子组件中调用事件处理函数
          var Child = React.createClass({
            handleVal: function() {
              var val = this.refs.emailDom.value;
              val = val.replace(/[^0-9|a-z|\@|\.]/ig,"");
              this.props.handleEmail(val);
            },
            render: function(){
              return (
                  < div>
                    请输入邮箱：< input ref="emailDom" onChange={this.handleVal}/>
                  < /div>
              )
            }
          });
          //父组件，通过handleEmail接受到的参数，即子组件的值
          var Parent = React.createClass({
            getInitialState: function(){
              return {
                email: ''
              }
            },
            handleEmail: function(val){
              this.setState({email: val});
            },
            render: function(){
              return (
                  < div>
                    < div>用户邮箱：{this.state.email}< /div>
                    < Child name="email" handleEmail={this.handleEmail.bind(this)}/>
                  < /div>
              )
            }
          });
          ReactDOM.render(
              < Parent />,
            document.getElementById('app')
          );
      </pre>
    </section>
    <section>
      <h3>八.react组件常用api</h3>
      <pre>
        设置状态：setState
        替换状态：replaceState
        设置属性：setProps
        替换属性：replaceProps
        强制更新：forceUpdate
        获取DOM节点：findDOMNode
        判断组件挂载状态：isMounted
      </pre>
    </section>
    <section>
      <h3>九.react设置样式</h3>
      <pre>
        var HelloMessage = React.createClass({
            render: function() {
              var styleObj = {
              color:"blue",
              fontSize:40,
              fontWeight:"normal"
              };
              
              {/*style={{color:'red'}}*/}
              return < h1 h1 style={styleObj} className="alert-text">Hello haha！< /h1>;
            }
          });
          
          ReactDOM.render(
            < HelloMessage />,
            document.getElementById('app')
          );
      </pre>
    </section>
    <section>
      <h3>十.react请求</h3>
      <pre>
      
      </pre>
    </section>
    <section>
      <h3>十一.react生命周期请求</h3>
      <pre>
        react有的生命周期有三个状态，七个方法
        Mounting：挂载，已插入真实 DOM   2个方法
        Updating：更新，正在被重新渲染    4个方法
        Unmounting：卸载，已移出真实 DOM   1个方法
        
        componentWillMount 在渲染前调用,在客户端也在服务端。
        componentDidMount : 在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来进行访问。 如果你想和其他JavaScript框架一起使用，可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异部操作阻塞UI)。
        componentWillReceiveProps 在组件接收到一个新的prop时被调用。这个方法在初始化render时不会被调用。
        shouldComponentUpdate 返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。
        可以在你确认不需要更新组件时使用。
        componentWillUpdate在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。
        componentDidUpdate 在组件完成更新后立即调用。在初始化时不会被调用。
        componentWillUnmount在组件从 DOM 中移除的时候立刻被调用。
        
        一般在componentDidMount中完成ajax请求，在componentWillUnmount取消未完成的请求
      </pre>
    </section>
    <section>
      <h3>十二.reactDOM操作</h3>
      <pre>
        http://blog.csdn.net/u013063153/article/details/52488879
        
        1.ref---react的属性，可以用来绑定到 render() 输出的任何组件上。
        ref添加到Compoennt上获取的是Compoennt实例，添加到原生HTML上获取的是DOM
        getDOMNode：compoennt.getDOMNode();//拿到了原生DOM
        findDOMNode：当参数是DOM，返回值就是该DOM（这个没啥卵用）；当参数是Component获取的是该Component render方法中的DOM    //拿到了原生DOM
        
           var MyComponent = React.createClass({
              handleClick: function() {
                // 使用原生的 DOM API 获取焦点
                this.refs.myInput.focus();
              },
              render: function() {
                //  当组件插入到 DOM 后，ref 属性添加一个组件的引用于到 this.refs
                return (
                  < div>
                    < input type="text" ref="myInput" />
                    < input
                        type="button"
                        value="点我输入框获取焦点"
                        onClick={this.handleClick}/>
                  < /div>
                );
              }
            });

        ReactDOM.render(
          < MyComponent />,
          document.getElementById('app')
        );
      </pre>
    </section>
    <section>
      <h3>十三.react路由</h3>
      <pre>
        1.作用
          管理 URL，实现组件的切换和状态的变化，开发复杂的应用
        2.基本使用
          引入：react-router库
            主要有2.0和4.0两个版本，这两个版本间有比较大的差别，我们用的是3.0,和2.0改动不大
          eg
            import { Router, Route, hashHistory } from 'react-router';
            render((
              < Router history={hashHistory}>
                < Route path="/" component={App}/>
                < Route path="/repos" component={Repos}/>
              < /Router>
            ), document.getElementById('app'));
        
            Router组件本身只是一个容器，真正的路由要通过Route组件定义。
            Route组件的path属性指定路由的匹配规则
            Router组件的history属性，用来监听浏览器地址栏的变化，并将URL解析成一个地址对象，供 React Router 匹配。一共可以设置三种值，browserHistory，hashHistory，createMemoryHistory
            根路由/：加载组件APP

        
        2.路由嵌套
          < Router history={hashHistory}>
            < Route path="/" component={App}>
              < Route path="/repos" component={Repos}/>
              < Route path="/about" component={About}/>
            < /Route>
          < /Router>
        
        用户访问/repos时，会先加载App组件，然后在它的内部再加载Repos组件。
          < App>
            < Repos/>
          < /App>
    
        App组件要写成下面的样子。
            export default React.createClass({
              render() {
                return < div>
                  {this.props.children}
                < /div>
              }
            })
        
        this.props.children属性就是子组件。
        
        子路由也可以不写在Router组件里面，单独传入Router组件的routes属性。


        let routes = < Route path="/" component={App}>
            < Route path="/repos" component={Repos}/>
            < Route path="/about" component={About}/>
          < /Route>;
        
        < Router routes={routes} history={browserHistory}/>

      3.IndexRoute---指定根路由的子组件
        < IndexRoute component={Home}/>
      4.Redirect---路由的跳转--自动跳转到另一个路由
        < Redirect>组件用于路由的跳转，即用户访问一个路由，会自动跳转到另一个路由。
        ＜Redirect from="messages/:id" to="/messages/:id" />
      5.IndexRedirect---根路由重定向
        ＜IndexRedirect to="/welcome" />
      6.Link---路由的跳转---手动跳到其他路由
        Link组件用于取代< a>元素
        < li>< Link to="/about">About< /Link>< /li>
      7.IndexLink---
        < IndexLink to="/" activeClassName="active">
          Home
        < /IndexLink>
      8.其他方式实现路由跳转
        browserHistory.push(path)；
        context.router.push(path)
      </pre>
    </section>
  
    
    
  </div>
</body>
「已注销」
关注
0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
react入门

react * { margin: 0; padding: 0; } body { background: #e6e3e3; } .main { border: 1px solid red; background: white; margin: 50px aut
复制链接

扫一扫