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 。