React.js前端框架初学技术总结

最近两天抽了点时间用于学习React.js框架

下面简单介绍一下React.js的项目搭建及开发

React.js是声明式编写UI并且组件化渲染页面，使用JavaScript编写

React开发的页面与HTML页面基本一样

简单的搭建方式是在HTML页面中直接引入React.js

<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>

babel概念：

由于React是由jsx代码写成的

所以babel的作用是将jsx代码转成JavaScript代码，再进行浏览器渲染

所以script标签中要写成

<script type="text/babel">
  ...
</script>

React页面：

在页面中提供一个入口标签

<div id="app"></div>

利用ReactDom来渲染Dom元素

ReactDom.render(
  <div>这是一个被渲染的div</div>,
  document.getElementById('app')
)

React组件：

创建React组件的方法有两种

第一种：

利用function函数直接定义组件

// 创建组件
function CreateNewComponent(){
  return (
    <div>这是新创建的一个组件</div>
  )
}

注意：创建的组件中，组件名一定要按大驼峰命名，函数体内一定要写return，如果不返回任何内容的话，需要 return null; 不写则会报错

第二种：

利用class创建组件

// 创建组件
class NewComponent extends React.Component{
  user = {
    name:'阿帕奇',
    age:26
  }
  render(){
    return (
      <span>我的名字是+{this.user.name}+"，我"+{this.user.age}+"岁"</span>
    )
  }
}

父子组件嵌套及传参：

// 父组件
class ParentCat extends React.Compontent{
  cat = {
    name:'大汤姆',
    age:3
  }
  render(){
    return (
      <div>
        <h3>{this.cat.name+"的年龄是"+this.cat.age+"岁"}</h3>
        <h3>{this.cat.name+"的child叫"}<TomChild fatherName={this.cat.name}></TomChild></h3>
      </div>
    )
  }
}

// 子组件
class ChildCat extends React.Compontent{
  cat = {
    name:'小汤姆',
    age:1
  }
  render(){
    return (
      <span>{this.cat.name},{this.cat.name+"parent的名字叫"+this.props.fatherName}</span>
    )
  }
}

React组件的事件触发：

// 事件方法调用组件
class EventMethods extends React.Component{
  // 方法函数
  fn = (e) => {
    console.log(this.refs.buttonRef);// 获取button元素
    console.log(e.target);// 获取button元素
    console.log(this.refs.inputRef.value);// 获取input中value值
  }
  dataList = [
    {
      id:1,
      name:'汤姆'
    },
    {
      id:2,
      name:'杰瑞'
    },
    {
      id:3,
      name:'班科'
    }
  ]
  render(){
    return (
      <div>
        <div>
          <input type="text" ref="inputRef"/>
        </div>
        <div>
          <button onClick={this.fn} ref="buttonRef">点击获取值</button>
        </div>
        // 利用map循环数据并渲染到页面当中
        {
          this.dataList.map((item,index) => {
            console.log(item);
            return (
              <div key={index}>
                <span>序号:{item.id}</span>
                <br />
                <span>名称:{item.name}</span>
              </div>
            )
          })
        }
      </div>
    )
  }
}

// 利用ReactDOM渲染组件
ReactDOM.render(
  <EventMethods />,
  document.getElementById('example')
)