react 20180504

最新推荐文章于 2024-09-15 21:06:29 发布

weixin_30399797

最新推荐文章于 2024-09-15 21:06:29 发布

阅读量56

点赞数

文章标签： webpack javascript ViewUI

原文链接：http://www.cnblogs.com/gyz418/p/8989361.html

版权

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>

View Code

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>

View Code

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>*/  //  1

    // return props.isToggle?<p>okok</p>:<p>nono</p>   // 2
    const imgs=['http://placekitten.com/200/198','http://placekitten.com/200/160']
    return (         // 3
        <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>

View Code

表单双向数据绑定

<!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>

View Code

状态提升前，渲染多个

<!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>

View Code

状态提升，把父组件的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>

View Code

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 。