Skip to content

useRef,useState,useEffect的使用

Jump to bottom
司徒正美 edited this page Dec 21, 2018 · 1 revision 
<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
<!--
<script src="https://cdn.bootcss.com/react/16.7.0-alpha.2/umd/react.development.js"></script>
  <script src="./react-dom.development.js"></script>
-->
 <script src="./dist/React.js"></script>
 
	<script type='text/javascript' src="./lib/babel.js"></script>

</head>

<body>

	<div id='root' class="root">

	</div>
	<script type='text/babel'>
        
var container = document.getElementById('root');
  var div = container;
  if (!window.ReactDOM) {
      window.ReactDOM = React;
  }
  var expect = function(a) {
      return {
          toBe: function(b) {
              console.log(a, 'vs', b, a === b);
          },
          toEqual(b) {
              console.log(a, 'vs', b, a + '' === b + '');
          },
          toThrow(){
              try{
                  a()
              }catch(e){
                  console.log(e,"catch")
              }
          }
      };
};
var {useState, useEffect, useRef} = React;
function Example() {
    const [count, setCount] = useState(0);
    const [text, setText] = useState('');
    var a = useRef("xxx")
    useEffect(() => {
      console.log(a, '方法内部')
       document.title = `You clicked ${count} times`;
       return () =>{
        document.title = `remove`;
       }
     });
    console.log(count, '更新Example')
    return (
      <quoteblock>
        <p>You clicked {count} times</p>
        <button onClick={() => setCount(count + 1)}>
          Click me
        </button>
        <input ref={a} value={text} onChange={function(e){
          setText(e.target.value)
        }} />
        <span>共{text.length}个字符</span>
      </quoteblock>
    );
}
class App extends React.Component{
    state = {
      aaa: 1
    }
    onClick(){
      this.setState(function(s){
        return {
          aaa: s.aaa +1
        }
      })
    }
    componentDidMount(){
      console.log("app mount")
    }
    componentDidUpdate(){
      console.log("app update")
    }
    render(){
      return <div>{this.state.aaa < 10 ? <Example />: null}
              <h1 onClick={this.onClick.bind(this)}>{ this.state.aaa}</h1>
        </div>
    }
}
ReactDOM.render(<App />, container)
	
    </script>


</html>

``html

<script type='text/javascript' src="./dist/React.js"></script> <script type='text/javascript' src="./test/react.development.js"></script> <script type='text/javascript' src="./test/react-dom.development.js"></script> 
<script type='text/javascript' src="./lib/babel.js"></script>

    <pre>应该等于
       
      
    </pre>
    <h1 id='root' class="root">

    </h1>
    <script type='text/babel'>
       var container = document.getElementById("example")
        var div = container
        var PropTypes = React.PropTypes
        if(!window.ReactDOM){
          window.ReactDOM = React
        }
        var expect = function(a) {
            return {
                toBe: function(b) {
                    console.log(a,"vs", b, a === b)
                },
                toEqual(b){
                    console.log(a,"vs", b, a +""=== b+"")
                },
                toThrow(b){
                    try{
                        a()
                    }catch(e){
                        console.log(e,"vs", b, e.message +""=== b+"")
                    }
                }
            }
        }

        const Hello = ({ name }) => <h1>Hello {name}!</h1>;
        
        class ShowMyError extends React.Component {
          constructor(props) {
            super(props);
            this.state = { error: false };
          }
        
          componentDidCatch(error, info) {
              console.log(error, info)
            this.setState({ error, info });
          }
        
          render() {
            if (this.state.error) {
              return (
                <div>
                  <h1>
                    Error AGAIN: {this.state.error.toString()}
                  </h1>
                  {this.state.info &&
                    this.state.info.componentStack.split("\n").map(i => {
                      return (
                        <div key={i}>
                          {i}
                        </div>
                      );
                    })}
                </div>
              );
            }
            return this.props.children;
          }
        }
        
        class Broken extends React.Component {
          constructor(props) {
            super(props);
            this.state = { throw: false, count: 0 };
          }
        
          render() {
            if (this.state.throw) {
              throw new Error("YOLO");
            }
        
            return (
              <div>
                <button
                  onClick={e => {
                    this.setState({ throw: true });
                  }}
                >
                  button will render error.
                </button>
        
                <button onClick={e => {
                  this.setState(({ count }) => ({
                    count: count + 1
                  }));
                }}>button will not throw</button>
        
                <div>
                  {"All good here. Count: "}{this.state.count}
                </div>
              </div>
            );
          }
        }
        
        class App extends React.Component {
          render() {
            const styles = {
              fontFamily: "sans-serif",
              textAlign: "center"
            };
            return (
              <div style={styles}>
                <Hello name="ShowMyError" />
                <h2>
                  Start clicking to see some {"\u2728"}magic{"\u2728"}
                </h2>
                <ShowMyError>
                  <Broken />
                </ShowMyError>
              </div>
            );
          }
        }
        
        ReactDOM.render(<App />, document.getElementById("root"));
</script> ```
Clone this wiki locally