react 20180504
react 入门
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
<script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
// const element=<h1>dfdf</h1>
const element=(
<div>
<p>title</p>
<p>content</p>
</div>
)
function Welcome(props){
// return <h1>hello,{props.name}</h1>
return (
<div>
<h1>hello,{props.name}</h1>
<h1>hello,{props.name}</h1>
</div>
)
}
const Welcome2=(props)=>{
return <h1>hello,{props.name}</h1>
}
class Wel extends React.Component{ // 都大写
render(){
// return <h1>hi,{this.props.name}</h1>
return (
<div>
<h1>hi,{this.props.name}</h1>
<h1>fine,thank you</h1>
</div>
)
}
}
ReactDOM.render(
// <h1>Hello, !</h1>, // 1
// element, // 2
// <Welcome name={'hehe'}/>, // 函数式组件 3
// <Welcome2 name={'xiaoming2'}/>,
<Wel name={'how are you'}/>, // 类组件 4
document.getElementById('root')
);
</script>
</body>
</html>
state 状态 componentDidMount componentWillUnmount
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
<script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
class Wel extends React.Component {
constructor (props) { // 构造函数
super(props);
this.state = {
date: new Date(),
isToggle:true
}
// 这个绑定是必要的，使`this`在回调中起作用
this.handleClick=this.handleClick.bind(this) }
handleClick(){
this.setState((prevState)=>({ // 箭头函数多了一个 （）
isToggle:!prevState.isToggle // 修改上一次的 state 要传成函数
}))
}
componentDidMount () { // 生命周期 初始化时
this.timeID = setInterval(() => {
this.setState({ // 修改 state 默认传对象
date: new Date()
})
}, 1000)
} componentWillUnmount () { // 页面卸载时
clearInterval(this.timeID)
} render () {
return (
<div>
<h1>hi,{this.state.date.toLocaleTimeString()}</h1>
<button onClick={this.handleClick}> {/*注释也要大括号 onClick 大写*/}
{this.state.isToggle?'on':'off'}
</button>
</div>
)
}
} ReactDOM.render(
<Wel/>,
document.getElementById('root')
);
</script>
</body>
</html>
state demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
<script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
// 其他都是函数式组件
function Mes (props) {
/*if (props.isToggle) {
return <p>ok</p>
}
return <p>no</p>*/ // // return props.isToggle?<p>okok</p>:<p>nono</p> // 2
const imgs=['http://placekitten.com/200/198','http://placekitten.com/200/160']
return ( //
<div>
<div>{props.isToggle?'okokok':'nonono'}</div>
<img src={props.isToggle?imgs[0]:imgs[1]} alt=""/>
</div>
)
}
// 只有一个写成类组件
class Wel extends React.Component {
constructor (props) {
super(props);
this.state = {
isToggle: true
}
this.handleClick = this.handleClick.bind(this)
} handleClick () {
this.setState((prevState) => ({
isToggle: !prevState.isToggle
}))
} render () {
return (
<div>
<button onClick={this.handleClick}>
{this.state.isToggle ? 'on' : 'off'}
</button>
<Mes isToggle={this.state.isToggle}/> {/*也可以不写成组件，直接丢进来*/}
</div>
)
}
} ReactDOM.render(
<Wel/>,
document.getElementById('root')
);
</script>
</body>
</html>
表单双向数据绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
<script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
class Wel extends React.Component {
constructor (props){
super(props)
this.state={
val:''
}
this.change=this.change.bind(this)
}
change(e){
this.setState({
val:e.target.value // 使用e.target
})
}
render () {
return (
<div>
<p>双向数据绑定，太麻烦了，使用 onChange </p>
<input type="text" value={this.state.val} onChange={this.change}/><br/>
{this.state.val}
</div>
)
}
} ReactDOM.render(
<Wel/>,
document.getElementById('root')
);
</script>
</body>
</html>
状态提升前 ，渲染多个
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>状态提前前 渲染多个input </title>
<script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
<script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function solve (val) {
if (val) {
return parseInt(val) * 2
}
}
class Wel extends React.Component {
constructor (props) {
super(props)
this.state = {
cel: '',
}
this.change = this.change.bind(this)
} change (e) {
this.setState({
cel: e.target.value
})
} render () {
const name=this.props.name
return (
<div>
{name}: <input type="text" value={this.state.cel} onChange={this.change}/><br/>
{solve(this.state.cel)}
<p>{name} is {parseInt(this.state.cel) > 100 ? 'ok' : 'error'}</p> </div>
)
}
} function All () { // 渲染多个
return (
<div>
<Wel name='one'/>
<Wel name='two'/>
</div>
)
} ReactDOM.render(
<All/>,
document.getElementById('root')
); </script>
</body>
</html>
状态提升，把父组件的state 通过 props 传给子组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>状态提升 </title>
<script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
<script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
class Wel extends React.Component {
constructor (props) {
super(props)
this.change = this.change.bind(this)
} change (e) {
this.props.celChange(e.target.value) // 调父组件的方法 celChange,把值传过去 {/* 状态提升*/}
} render () {
const name = this.props.name
return (
<div> {/* 状态提升 ，state 变成 props*/}
{name}: <input type="text" value={this.props.cel} onChange={this.change}/><br/>
{this.props.name}{this.props.cel}
{<p>{name} is {parseInt(this.props.cel) > 100 ? 'ok' : 'error'}</p>}
</div>
)
}
} class All extends React.Component {
constructor (props) {
super(props);
this.state = { // 父组件有 state
one: '',
two: ''
}
this.oneFn = this.oneFn.bind(this)
this.twoFn = this.twoFn.bind(this)
} oneFn (val) { // 接收传过来的值
this.setState({
one: val
})
} twoFn (val) {
this.setState({
two: val
})
} render () {
return (
<div>
<Wel name='one' celChange={this.oneFn} cel={this.state.one}/> {/* 把状态 通过 props 传给组件*/}
<Wel name='two' celChange={this.twoFn} cel={this.state.two}/>
{this.state.one && this.state.two && 'this result is: ' + [parseInt(this.state.one) + parseInt(this.state.two)]}
</div>
)
}
} ReactDOM.render(
<All/>,
document.getElementById('root')
); </script>
</body>
</html>
react
react
npx create-react-app my-app npm run eject 暴露webpack配置，默认隐藏 npm i -g serve
serve -s build // 静态服务器，打包后使用 函数式组件
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
} 类组件 【类允许我们在其中添加本地状态(state)和生命周期钩子】
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
} === 函数式组件 使用
function Welcome(props) { // 组件名 W 大名
return <h1>Hello, {props.name}</h1>;
} const element = <Welcome name="Sara" />;
ReactDOM.render(
element,
document.getElementById('root')
);
======= end ======= 在 JavaScript 中， true && expression 总是会评估为 expression ，而 false && expression 总是执行为 false 。
react 20180504的更多相关文章
- react组件的生命周期
写在前面: 阅读了多遍文章之后,自己总结了一个.一遍加强记忆,和日后回顾. 一.实例化(初始化) var Button = React.createClass({ getInitialState: f ...
- 十分钟介绍mobx与react
原文地址:https://mobxjs.github.io/mobx/getting-started.html 写在前面:本人英语水平有限,主要是写给自己看的,若有哪位同学看到了有问题的地方,请为我指 ...
- RxJS + Redux + React = Amazing!（译一）
今天,我将Youtube上的<RxJS + Redux + React = Amazing!>翻译(+机译)了下来,以供国内的同学学习,英文听力好的同学可以直接看原版视频: https:/ ...
- React 入门教程
React 起源于Facebook内部项目,是一个用来构建用户界面的 javascript 库,相当于MVC架构中的V层框架,与市面上其他框架不同的是,React 把每一个组件当成了一个状态机,组件内 ...
- 通往全栈工程师的捷径 —— react
腾讯Bugly特约作者: 左明 首先,我们来看看 React 在世界范围的热度趋势,下图是关键词“房价”和 “React” 在 Google Trends 上的搜索量对比,蓝色的是 React,红色的 ...
- 2017-1-5 天气雨 React 学习笔记
官方example 中basic-click-counter <script type="text/babel"> var Counter = React.create ...
- RxJS + Redux + React = Amazing!（译二）
今天,我将Youtube上的<RxJS + Redux + React = Amazing!>的后半部分翻译(+机译)了下来,以供国内的同学学习,英文听力好的同学可以直接看原版视频: ht ...
- React在开发中的常用结构以及功能详解
一.React什么算法,什么虚拟DOM,什么核心内容网上一大堆,请自行google. 但是能把算法说清楚,虚拟DOM说清楚的聊聊无几.对开发又没卵用,还不如来点干货看看咋用. 二.结构如下: impo ...
- React的使用与JSX的转换
前置技能:Chrome浏览器 一.拿糖:React的使用 React v0.14 RC 发布,主要更新项目: 两个包: React 和 React DOM DOM node refs 无状态的功能 ...
随机推荐
- mysql主从复制、redis基础、持久化和主从复制
一.mysql(mariadb)基础 1.基础命令(centos7操作系统下) 1.启动mysql systemctl start mariadb 2.linux客户端连接自己 mysql -uroo ...
- BZOJ3028食物——生成函数+泰勒展开
题目描述 明明这次又要出去旅游了,和上次不同的是,他这次要去宇宙探险!我们暂且不讨论他有多么NC,他又幻想了他应 该带一些什么东西.理所当然的,你当然要帮他计算携带N件物品的方案数.他这次又准备带一些 ...
- shell 基础（一）
废话少说 往下看 1. 查看 Shell Shell 是一个程序,一般都是放在/bin或者/user/bin目录下,当前 Linux 系统可用的 Shell 都记录在/etc/shells文件中./e ...
- Python之——CentOS 6.5安装Python2.7.14
Python之——CentOS 6.5安装Python2.7.14 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/l1028386804/art ...
- Entity Framework入门教程（16)---Enum
EF DbFirst模式中的枚举类型使用 这一节介绍EF DbFirst模式中的Enum(枚举类型),CodeFirst模式中的Enum会在以后的EF CoreFirst系列中介绍.EF5中添加了对E ...
- 第六节：反射（几种写法、好处和弊端、利用反射实现IOC）
一. 加载dll,读取相关信息 1. 加载程序集的三种方式 调用Assembly类下的三个方法:Load.LoadFile.LoadFrom. //1.1 Load方法:动态默认加载当前路径下的(bi ...
- css预编译语言 sass scss（变量$var, css嵌套规则，@import规则，@extend，@mixin）
什么是sass Sass 是对 CSS 的扩展,让 CSS 语言更强大.优雅. 它允许你使用变量.嵌套规则. mixins.导入等众多功能, 并且完全兼容 CSS 语法. Sass 有助于保持大型样式 ...
- DUMP3.5 企业级电商项目
购物车模块 加入商品 更新商品数 查询商品数 移除商品 单选/取消 全选/取消 购物车列表 [浮点型商业运算精度丢失问题]ej1st 一书提到 float double只适合科研计算,BigDeci ...
- Codeforces Round #449 (Div. 2) D. Ithea Plays With Chtholly
题目链接 交互题. 题意:给你三个数n,m,k.让你完成至多m次互动,每次给你一个q,让你从n个位置选一个位置放这个数,覆盖已经放过的数.让你再m次使得n个位置的数不递减,达到直接退出. 解法:暴力, ...
- JAVA进阶9
间歇性混吃等死,持续性踌躇满志系列-------------第9天 1.使用throw语句抛出异常 在通常情况下,程序发生错误时系统会自动抛出异常,而有时希望程序自动抛出异常,可以使用throw语句来 ...