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 无状态的功能 ...
随机推荐
- Lodop某个电脑打印内容大小有问题
可能原因分析:本地设置放大比例问题,是真实的放大或缩小,1.查看比例应在100%, 2.控制面板设置显示应在100%(win7 win10中) 3.超文本样式问题,分析样式中不同浏览器版本下显示不一致 ...
- jQuery对页面的操作
一.对元素内容和值进行操作 1.对元素内容操作 [text()]:获取值. [text(val)]:获取并修改值. [html()]:获取值. [html(val)]:获取并修改值,与text的区别在 ...
- jsp篇 之 EL表达式
EL表达式: 形式:${ } 作用:从一个[范围对象里面取值]或者从一个对象中取值或是向页面输出值. 之前我们使用<% ... %>等形式,并不够简洁. 例如: <% request ...
- python之模块、包的导入过程和开发规范
摘要:导入模块.导入包.编程规范 以My_module为例,My_module的代码如下: __all__ = ['name','read'] print('in mymodule') name = ...
- 进程初识和multiprocessing模块之Process
一.什么是进程 进程就是运行中的程序 进程是操作系统中最小的资源分配单位 进程与进程之间的关系 : 数据隔离的 进程的id:Process id = pid pid是一个全系统唯一的对某个进程的标识, ...
- Scrapy 框架，持久化文件相关
持久化相关 相关文件 items.py 数据结构模板文件.定义数据属性. pipelines.py 管道文件.接收数据(items),进行持久化操作. 持久化流程 1.爬虫文件爬取到数据后,需要将数据 ...
- Transaction check error: file /etc/rpm/macros.ghc-srpm from install of redhat-rpm-config-9.1.0-80.el7.centos.noarch conflicts with file from package epel-release-6-8.noarch Error Summary ----------
./certbot-auto certonly 报错: Transaction check error: file /etc/rpm/macros.ghc-srpm from install of ...
- Elastalert安装及使用
如果在windows 64平台报错:执行 pip install python-magic-bin==0.4.14修复https://stackoverflow.com/questions/18374 ...
- go实现json数组嵌套
go实现json数组嵌套 引用包 "encoding/json" 定义以下结构体 type person struct { Name string `json:"name ...
- PageRank算法--从原理到实现
本文将介绍PageRank算法的相关内容,具体如下: 1.算法来源 2.算法原理 3.算法证明 4.PR值计算方法 4.1 幂迭代法 4.2 特征值法 4.3 代数法 5.算法实现 5.1 基于迭代法 ...