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 无状态的功能 ...
随机推荐
- 金融量化之Tushare模块
一.介绍 Tushare是一个免费.开源的python财经数据接口包.主要实现对股票等金融数据从数据采集.清洗加工 到 数据存储的过程,能够为金融分析人员提供快速.整洁.和多样的便于分析的数据,为他们 ...
- 2.4 random 模块
- 【并发编程】一个最简单的Java程序有多少线程？
一个最简单的Java程序有多少线程? 通过下面程序可以计算出当前程序的线程总数. import java.lang.management.ManagementFactory; import java. ...
- MySQL数据目录(data)迁移
因为系统分区的空间不足,添加了一块硬盘,挂载到/data目录下,把MySQL的数据目录(data)迁移过去. 1.停止MySQL服务: [root@zabbix mysql]# service mys ...
- sudo brew install mongodb报错
报错信息如下: Error: Running Homebrew as root is extremely dangerous and no longer supported. As Homebrew ...
- expprt与环境变量
一.Windows 环境变量 1.在Windows 系统下,很多软件安装都需要配置环境变量,比如 安装 jdk ,如果不配置环境变量,在非软件安装的目录下运行javac 命令,将会报告找不到文件,类似 ...
- css中的数学表达式calc()
前言 数学表达式calc()是CSS中的函数,主要用于数学运算.使用calc()为页面元素布局提供了便利和新的思路. 概念 数学表达式calc()是calculate计算的缩写,它允许使用+.-.*. ...
- windows服务器基本管理及服务搭建
windows服务器基本管理及服务搭建 ****windows服务器系统版本:2000 2003 2008 2012 1.用户与组管理 用户:账户=账号/用户名+密码 每个账户有自己唯一的SID 账户 ...
- Win10 自定义右键新建菜单
Win10 自定义右键新建菜单 regedit打开: 计算机\HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\Explorer\ ...
- 预置app/apk到系统 && 预置so库进系统 && 预置普通文件和文件夹进系统
https://blog.csdn.net/zhandoushi1982/article/details/4695460