react小结

react基础小结

1. 例子

import React from ‘react‘
import { render } from ‘react-dom‘ 

// 定义组件
class Hello extends React.Component {
    render() {
         // return 里面写jsx语法
        return ( <p>hello world</p> )
    }
}

 // 渲染组件到页面
render( <Hello/>, document.getElementById(‘root‘) )
    
import React from ‘react‘这里的react对应的是./package.json文件中dependencies中的‘react‘,即在该目录下用npm install安装的 react 。npm 安装的 react 的物理文件是存放在 ./node_modules/react中的,因此引用的东西肯定就在这个文件夹里面。

./node_modules/react/package.json中的"main": "react.js",,这里的main即指定了入口文件,即./node_modules/react/react.js这个文件

2. jsx语法1)使用一个父节点包裹jsx中不能一次性返回零散的多个节点,如果有多个则包含到一个节点中如:
return (
    <div>
        <p>段落1</p>
        <p>段落2</p>
        <p>段落3</p>
    </div>
)
3. 注释jsx中用{/**/}的注释形式如:
return(
    //jsx外的注释
    <div>
        {/*jsx里面的注释*/}
        <p>hello</p>
    </div>
)

4. 样式

css样式:

<p className="class1">hello</p>
<!--用className代替class*/
内联样式:
<p style={{color:‘red‘,fontSize:‘20px‘}}>hello</p>
<!--注意{{}},和驼峰写法-->

5. 事件

如:click

class Hello extends React.Component{
    render(){
        return (
            <p onClick={this.clickHandler.bind(this)}>hello</p>
        )
    }

    clickHandler(event){
        console.log(‘yes‘)
    }
}

注意:onClick驼峰写法

6. 循环

7. 判断

jsx中一般会用到三元表达式(表达式也是放在{}中的)

如:

return(
    <div>
        <p>段落1</p>
        {
            true
            ? <p> true </p>
            : <p> false </p>
            </div>
        }
    </div>
)

也可以这样使用:

<p style={{display: true? ‘block‘ ? ‘none‘}}> hello world</p>

8. 数据传递&数据变化

1) props

如果

<Header title="Hello页面"/>

在Header组件中可以这样取到

render(){
    return(
        <p>{this.props.title}</p>
    )
}

在react中,父组件给子组件传递数据时,就是以上的方式,通过给子组件设置props,子组件获取props中的值便可完成数据传递。

2)props&state

如果组件内部自身的属性发生变化

class Hello extends React.Component{
    constructor(props,context){
        super(props,context);
        this.state={
            //显示当前时间
            now:Date.now()
        }
    }
    render(){
        return(
            <div>
                <p>hello world {this.state.now}</p>
            </div>
        )
     }
}

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

var LikeButton = React.createClass({
        getInitialState: function (){
            return {liked : false};
        },
        handleClick: function (event) {
            this.setState({liked: !this.state.liked});
        },
        render: function(){
            var text = this.state.liked ? ‘like‘ : ‘haven\‘t liked‘;
            return (
                <p onClick={this.handleClick}>
                    you {text} this click to toggle
                </p>
            );
        }
    });
3)智能组件&木偶组件

 
时间: 2024-11-10 07:50:57

react小结的相关文章

react学习小结(生命周期- 实例化时期 - 存在期- 销毁时期)

react学习小结 本文是我学习react的阶段性小结,如果看官你是react资深玩家,那么还请就此打住移步他处,如果你想给一些建议和指导,那么还请轻拍~ 目前团队内对react的使用非常普遍,之前对react使用不多,正好我目前在做的项目也在使用react+redux,借着这个机会系统的学习下react+redux. react是什么 react是一个JavaScript类库,通过react,我们可以构建可组合的UI,也就是说,我们可以通过重用组件来组合出我们的UI.可以说react的核心便是

React学习小结(三)

一.React数据的传输 1.属性和状态是react中数据传递的载体 2.属性是声明以后不允许被修改的东西 3.属性只能在组件初始化的时候声明并传入组件内部,并且在组件内部通过this.props获取 4.组件内部可以通过getDefaultProps声明默认属性 下面来说一下属性传值的两种方式:1.key-value形式 2.展开式 首先来看一下第一种传值方式: var Demo = React.createClass({ render:function(){ var sty={width:'

React学习小结(二)

一.组件的嵌套 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script src="react.min.js" type="text/javascript" charset="utf-8"></script> 7

React复习小结(一)

一.React的发展 facebook在构建instagram网站的时候遇见两个问题: 1.数据绑定的时候,大量操作真实dom,性能成本太高 2.网站的数据流向太混乱,不好控制 于是facebook起初调研过市场上已存的mvc框架,发现都不太满意,于是就推陈出新,开发了react框架,并在2013年五月份开源. 二.React概述 和angularJS一样react核心解决的问题是数据绑定,开发者只要将数据绑定好,剩下的开发中只要关注业务就行了 1.组件化开发 使用react开发的时候,构建任何

React使用小结

园子都荒废两个月了,实在是懒呀.. 近段时间用React开发了几个页面,在使用过程中着实碰到了一些问题,估计刚开始学习的伙伴们都会遇到各种各样的坑 总结记录一下,只看文档是碰不上问题的,内容基础也不基础,高手还请绕道哈哈哈 文章略长,整个目录吧,想看哪儿看哪儿 基本使用 同一页面中使用 独立文件中使用 JSX return后面只能有一个父级 {}中嵌套JS表达式 受限的HTML属性 智能的...展开操作符 事件绑定与event对象传值 需闭合标签 属性.状态 属性 状态 组件的三种定义方式 函数

Facebook React Native 配置小结

2015 年 9 月 15 号,React Native for Android 发布.至此,React 基本完成了对多端的支持.基于 React / React Native 可以: H5, Android, iOS 多端代码复用 实时热部署 目前使用 React Native 开发只能在 Mac 系统 上进行.所以配置都是基于Mac os. 环境配置 首先需要安装的有: Homebrew(brew): Homebrew 是 Mac 中的一个安装包管理器.没有安装的话,点击这里安装 我的版本如

React组件生命周期小结

转载自:http://www.jianshu.com/p/4784216b8194 下面所写的,只适合前端的React.(React也支持后端渲染,而且和前端有点小区别,不过我没用过.) 相关函数 简单地说,React Component通过其定义的几个函数来控制组件在生命周期的各个阶段的动作. 在ES6中,一个React组件是用一个class来表示的(具体可以参考官方文档),如下: // 定义一个TodoList的React组件,通过继承React.Component来实现 class Tod

React.js学习知识小结(一)

学习React也有半个月了吧,这里对所学的基础知识做个简单的总结.自己先是跟着官方文档学,差不多学了四五天,也跟着入门教程做了一个简单的小栗子.然后跟着阮一峰老师的教程上手了几个小Demo,后来在网上发现了一本很好的书React.js小书,自己断断续续也学了几天,上面也几个实战的小项目,可以跟着练练手. 话不多说,就直接来总结吧! JSX 组件 区分props和state 生命周期函数 事件系统 高阶组件 React.js的context 函数式编程 使用PropTypes检查类型 ref属性和

react webapp 开发小结

1.监听props的方法 componentWillReceiveProps(nextProps) { // } 2.监听state的方法 3.props 传递的方法 <AlarmList {...this.props} /> . 原文地址:https://www.cnblogs.com/crazycode2/p/9312179.html