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 无状态的功能 ...
随机推荐
- [模板] K-D Tree
K-D Tree K-D Tree可以看作二叉搜索树的高维推广, 它的第 \(k\) 层以所有点的第 \(k\) 维作为关键字对点做出划分. 为了保证划分均匀, 可以以第 \(k\) 维排名在中间的节 ...
- 【51NOD1965】奇怪的式子 min_25筛
题目描述 给你\(n\),求 \[ \prod_{i=1}^n{\sigma_0(i)}^{i+\mu(i)} \] 对\({10}^{12}+39\)取模. \(\sigma_0(i)\)表示约数个 ...
- vue数组中对象属性变化页面不渲染问题
问题引入 Vue之所以能够监听Model状态的变化,是因为JavaScript语言本身提供了Proxy或者Object.observe()机制来监听对象状态的变化.但是,对于数组元素的赋值,却没有办法 ...
- dajngo cache,throttling
缓存 背景介绍: 动态网站的问题就在于它是动态的. 也就是说每次用户访问一个页面,服务器要执行数据库查询,启动模板,执行业务逻辑以及最终生成一个你所看到的网页,这一切都是动态即时生成的. 从处理器资源 ...
- zabbix数据库分表的实现
前提条件是主从同步操作完成(主从同步的前提是两个数据库表结构必须一样) 先看一下mysql配置文件 vi /usr/local/mysql/my.cnf 配置内容:------------------ ...
- bzoj5028小Z的加油店（线段树+差分）
题意:维护支持以下两种操作的序列:1 l r询问a[l...r]的gcd,2 l r x把a[l...r]全部+x 题解:一道经典题.根据gcd(a,b)=gcd(a-b,b)以及区间加可知,这题可以 ...
- 20175221 《Java程序设计》第5周学习总结
20175221 <Java程序设计>第5周学习总结 教材学习内容总结 接口的定义 接口声明:interface 接口名 接口体中只可以有常量,而没有变量 接口体中只有抽象方法(可省略 ...
- jquery cookie问题
近期工作中遇到了jquery cookie解决问题,顺便记录下: <div id="submenu"> <ul> <li><a id=&q ...
- linux log4j乱码问号的解决
原因: linux本地设置的文件编码格式不是UTF-8 解决办法: 运行locale命令看一下结果: 把LC_CTYPE修改为“zh_CN.UTF-8”: cd ~/ vi .bashrc 添加: L ...
- WPF中的常用布局
一 写在开头1.1 写在开头评价一门技术的好坏得看具体的需求,没有哪门技术是面面俱到地好. 1.2 本文内容本文主要内容为WPF中的常用布局,大部分内容转载至https://blog.csdn.net ...