初级React入门

一、引入Reactjs

方法一:直接下载相关js文件引入网页,其中react.js 是 React 的核心库,react-dom.js 是提供与 DOM 相关的功能,Browser.js 的作用是将 JSX 语法转为 JavaScript 语法,这一步很消耗时间,实际上线的时候,应该将它放到服务器完成。

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

方法二:通过前端架构工具,比如 browserify 或 webpack。使用 react和 react-dom npm 包.

var React = require('react');
var ReactDOM = require('react-dom');

二、基本原理

1、创建组件

var Component=React.createClass({
  render:function(){
    return (
      <div className="box">
        <h2>我是一个标题</h2>
        <contentInfo />//子组件     
      </div>    
    )    
  } 
})   

2、渲染组件(组件名称,要插入的节点)

ReactDOM.render(<Component />, document.getElementById('app'));

3、组件的状态,状态改变组件将重新渲染

getInitialState: function() {
  return {liked: false};
}

4、组件的数据交互

用this.props获取组件传递过来的数据

var HelloMessage = React.createClass({
  render: function() {
    return <h1>Hello {this.props.name}</h1>;
  }
});

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

设置ref值,方便后续使用React.findDOMNode方法获取虚拟dom

var MyComponent = React.createClass({
  handleClick: function() {
    var TextInput=React.findDOMNode(this.refs.myTextInput);
    TextInput.value="clicked";
  },
  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('example'));

  5、组件的生命周期(初始化、运行中、销毁) 

//初始化阶段函数介绍
getDefaultProps();//只调用一次,实例之前共享引用
getInitialState();//初始化每个实例特有的状态
componentWillMount();//render之前最后一次修改状态的机会
render();//只能访问this.props和this.state,只有一个顶层组件,不允许修改状态和DOM输出
componentDidMount();//成功render并渲染完成真实DOM后触发,可修改DOM
//运行中阶段函数介绍
componentWillReceiveProps();//父组件修改属性触发,可以修改新属性和状态
shouldComponentUpdate();//返回false会阻止render(提升性能)
componentWillUpdate();//不能修改属性和状态
render();//同初始化函数render
componentDidUpdate();//同初始化函数componentDidMount
//销毁阶段函数介绍
componentWillUnmount();//在删除组件前进行清理操作,比如计时器和事件监听器

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 读书笔记《CSS权威指南》

    阅读本书主要目的: 自从学会CSS以来,虽然熟练掌握了其使用方法和技巧,但对其底层的原理和实现并不清晰,阅读本书想进一步系统化的学习和深入研究其本质,对这门前端...

    小古哥
  • HTML5复习整理

    一、推出的目标 web浏览器兼容性低;文档结构不明确;web应用程序的功能受限 二、语法的改变 内容类型(html或htm);DOCTYPE声明简化;指定字符编...

    小古哥
  • gulp使用技巧-删除node_modules文件夹,解决目录层次太深删除报错的问题

    在使用gulp当中,自动生成的node_modules文件夹,因为文件目录层级太深,无法系统删除,用360粉碎工具也报错 解决方法: 使用npm中的插件rimr...

    小古哥
  • 专访旷视副总裁彭广平:旷视为何选择收购艾瑞思?

    2016 年 5 月,彭广平创立了北京艾瑞思机器人技术有限公司,担任总经理负责公司总体运营。

    AI科技大本营
  • 使用request.getInputStream() 获取POST数据

    qubianzhong
  • 从码农到技术总监分享Leader经验

    从一个毕业的IT小伙或者一个码农成长为一个管理者,有很多需要转变的思想,那么当你遇到了瓶颈,或许我的经验能帮到你,感谢。

    用户1112962
  • KM系统的构建及安全考量

    KM(Knowledge Management),是有系统的管理与运用企业的经营智能,透过信息技术加以存储和呈现,并作为企业营运的参考信息。比尔.盖兹在《数字神...

    FB客服
  • 【GAN优化】GAN训练的小技巧

    头一阵子放假了,专栏都没有怎么更新了,今天开始继续更新(想问问小伙伴们都放了多久的假期?我们只有两周感觉时间好短呀~)

    用户1508658
  • Shell 读取文件 截取字符串

    问天丶天问
  • PHP文件操作类

    <?php /*************************************************************************...

    joshua317

扫码关注云+社区

领取腾讯云代金券