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)智能组件&木偶组件

 

react小结的更多相关文章

  1. vue—你必须知道的 js数据类型 前端学习 CSS 居中 事件委托和this 让js调试更简单—console AMD && CMD 模式识别课程笔记(一) web攻击 web安全之XSS JSONP && CORS css 定位 react小结

    vue—你必须知道的   目录 更多总结 猛戳这里 属性与方法 语法 计算属性 特殊属性 vue 样式绑定 vue事件处理器 表单控件绑定 父子组件通信 过渡效果 vue经验总结 javascript ...

  2. React ~ 小结

    React 小结 state 与 props react 里,只需更新组件的state,然后根据新的state重新渲染用户界面,不需要操作dom. 添加类的构造函数来初始化状态this.state,类 ...

  3. 工具资源系列之 github 上各式各样的小徽章从何而来?

    前言 平时大家在在逛 github 时或多或少都看到过项目首页各式各样的小徽章,不知道你是否和我一样好奇这些小徽章都是哪来的呢? 首先我们先来一睹为快目前前端开发的三大主流框架: var ,看一看他们 ...

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

    react学习小结   本文是我学习react的阶段性小结,如果看官你是react资深玩家,那么还请就此打住移步他处,如果你想给一些建议和指导,那么还请轻拍~ 目前团队内对react的使用非常普遍,之 ...

  5. React组件生命周期小结

    React组件生命周期小结 下面所写的,只适合前端的React.(React也支持后端渲染,而且和前端有点小区别,不过我没用过.) 相关函数 简单地说,React Component通过其定义的几个函 ...

  6. React 入门小结

    前段时间用 Ant Design 做了一个项目,由于之前没有 React 基础,对于 ES6 也是一知半解,所以也是一边开发一边学习,好不容易把项目完成了,现在终于有时间沉下心来从头开始好好学一下 R ...

  7. 小记:vue 及 react 的工程项目入口小结及 webpack 配置多页面应用参考

    一.前言 闲暇时间,看了下前端的基础知识,有幸参与了公司公众号项目前面的一个阶段,学习到了一些前端框架的相关知识 小结了一下 自己练习通过新建一个个文件组织起项目的过程中的一些理解 二.项目入口 vu ...

  8. React及Nextjs相关知识点小结

    React及Nextjs知识点小结 函数式组件和类组件区别是什么 1.函数式组件是用于创建无状态的组件,组件不会被实例化,无法访问this中的对象,无法访问生命周期方法,是无副作用的,相比于类组件函数 ...

  9. Facebook React Native 配置小结

    2015 年 9 月 15 号,React Native for Android 发布.至此,React 基本完成了对多端的支持.基于 React / React Native 可以: H5, And ...

随机推荐

  1. c#委托事件入门--第一讲:委托入门

    说起委托,有些刚刚入门c#的人感觉很高大上,没有接触过,但是其实很多人都用过Lambda表达式,实际上Lambda表达式就是一个委托. 关于委托入门有个大神写的很详细:张子阳的博客  C#中的委托和事 ...

  2. oracle创建函数和调用存储过程和调用函数的例子(区别)

    创建函数: 格式:create or replace function func(参数 参数类型) Return number Is Begin --------业务逻辑--------- End; ...

  3. ReentrantLock与Condition构造有界缓存队列与数据栈

    通过ReentrantLock与Condition的设计,以数组为基础,可以实现简单的队列和栈的数据结构,临界阻塞的效果. ReentrantLock相对于synchronized比较大的一个区别是有 ...

  4. Apache、IIS、Nginx等绝大多数web服务器,都不允许静态文件响应POST请求,否则会返回“HTTP/1.1 405 Method not allowed”错误。

    例1:用Linux下的curl命令发送POST请求给Apache服务器上的HTML静态页 [root@new-host ~]# curl -d 1=1 http://www.sohu.com/inde ...

  5. IOS开发之UIView总结1

    太长了,请看 http://blog.csdn.net/xdrt81y/article/details/9128695 performSelector: performSelector:withObj ...

  6. Linuxc - define 与 typedef的区别

    预处理就是讲一些头文件展开. 预处理还会将使用到宏定义的值替换为真正的值.宏只是单纯的字符串的替换. #define 宏定义 眼里没有语法,不用分号结尾. typedef 定义别名,是有语法的,要用分 ...

  7. C语言的函数调用过程

    从汇编的角度解析函数调用过程 看看下面这个简单函数的调用过程: int Add(int x,int y) { ; sum = x + y; return sum; } int main () { ; ...

  8. scrapy_创建_调试

    如何创建scrapy项目? 输入命令: scrapy startproject project_name 在当前目录下创建名字叫project_name的scrapy项目 命令格式:scrapy st ...

  9. WebSphere--连接管理器

    连接管理器使您可以控制并减少由 Web 应用程序使用的资源.相对于非 Web 应用程序,基于 Web 的应用程序对数据服务器的访问会导致更高的和不可预料的系统开销,这是由于 Web 用户更为频繁的连接 ...

  10. 【转】 SED多行模式空间

    1. sed执行模板=sed '模式{命令1;命令2}' 即逐行读入模式空间,执行命令,最后输出打印出来 2. 为方便下面,先说下p和P,p打印当前模式空间内容,追加到默认输出之后,P打印当前模式空间 ...