reactjs入门

2019-01-22  本文已影响10人  三明流浪人

reactjs开发时一般会采用es6语法(es6入门推荐阅读http://es6.ruanyifeng.com/#docs/intro),

hello world

    此为最简单的demo,将最简单的组件渲染到页面上。

    

hello world  demo

import React from 'react'引用的是package.json文件中dependencies中的react。

jsx语法

jsx不能一次性返回零散的多个节点,如果有多个需要包含在一个中

jsx多个零散节点返回

注释

jsx中注释必须用{/**/}的注释形式

    

jsx的注释

样式

jsx对应html中的两种形式 ,jsx种这样写:

css样式:<p className="class1">hello world</p>,注意这里是className,而 html 中是class

内联样式:<p style={{display: 'block', fontSize: '20px'}}>hello world</p>,注意这里的{{...}},还有fontSize的驼峰式写法

事件

用click举例,需要在标签上绑定click事件,可以这样写

    

click点击事件

注意:onClick是驼峰式命名法,通过.bind()传递参数

循环

    在jsx中使用循环,一般会用到Array.prototype.map的方式

    

jsx中的循环

注意:Array.map是包裹{}中的,key={value}有助于react的渲染优化jsx中的{}可以放置一个可执行的js程序或者变量。

判断

jsx中一般无法使用if...else...,故jsx中的判断基本使用三元运算符

jsx三元运算符判断

代码分离

    page层

    在helloworld的demo中,所有的jsx代码都在一个文件中,实际开发中并非这样,故需要代码分离。

    1、创建./app/containers/Hello/index.js文件,将之前创建组件的代码放入

    

创建组件的代码

    2、在./app/index.js中引入即可

        

引入之前创建的组件

    subpage 层

    如果Hello组件再复杂一点,即使这样放在一起也很复杂,需要再次进行拆分。

    创建./app/containers/Hello/subpage目录,然后在其下面创建Carousel.js、 Recommend.js、 List.js三个文件,分别写入不同的代码,然后./app/containers/Hello/index.js中可以这样写

    

拥有 subpage的组件页面

component 层

    以上介绍的都是页面层级的内容,将复杂的页面进行拆分为subpage,亦无甚特别。APP每个页面最上面都会有个 header,可以显示标题,亦可以返回,样子都差不多,没必要为每个页面都写入。

    创建./app/components/Header/index.js文件,写入基本的组件代码,然后在./app/containers/index.js中引用

    

引入components

注意:所有的页面都会用到header,我们可以将多个页面都可能用到的功能封装到组件中,代码放入./app/components中。

数据传递&数据变化

    props

    所有用到header的页面内容不尽相同,页面中引入时我们可以通过title属性进行传值:<Header title="Hello页面"/>

    在header中,可以通过props取的该值

    

header代码中取值

在 React 中,父组件给子组件传递数据时,就是以上方式,通过给子组件设置 props 的方式,子组件取得 props 中的值即可完成数据传递。被传递数据的格式可以是任何 js 可识别的数据结构,上面demo是一个字符串React 中,props 一般只作为父组件给子组件传递数据用,不要试图去修改自己的 props !

props && state

    props不能被自身修改,组件中自身属性发生变化,一般使用state

    

state初体验

    注意:React 会实时监听每个组件的 props 和 state 的值,一旦有变化,会立刻更新组件,将结果重新渲染到页面上。

生命周期

1、getInitialState:初始化组件state数据,在es6中,通常这样写

    

构造函数

    2、render

        渲染模板使用,最为常见

    3、comopentDidMount

        首次加载组件并插入dom时使用,一般用来获取网络数据,实际项目开发中用到。

    4、shouldComponentUpdate

        主要用于性能优化,怎么使用,未知

    5、componentDidUpdate

        组件更新后触发的事件,用于清空或者更新数据,开发中经常用到。

    6、componentWillUnmount

        组件销毁之前触发的事件,一般用户存储一些特殊信息,以及清理setTimeout事件等。

上一篇 下一篇

猜你喜欢

热点阅读