女王控的博客

React基础知识第三部分

学习地址:新手指南 ReactJS 视频以下标题均采用链接+视频时长的方式展示

React 事件处理(3:42)

html 复制代码
<!DOCTYPE html>
<html lang="en">
  <body>
    <div id="root"></div>
    <script src="https://cdn.bootcss.com/react/16.2.0/umd/react.development.js"></script>
    <script src="https://cdn.bootcss.com/react-dom/16.2.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.bootcss.com/babel-standalone/7.0.0-beta.3/babel.js"></script>
    <script type="text/babel">
      // 函数式编程
      const state = { eventCount: 0, username: '' };
      function App() {
        return (
          <div>
            <p>There have been {state.eventCount} events</p>
            <p>
              <button onClick={increment}>Press</button>
            </p>
            <p>You typed: {state.username}</p>
            <p>
              <input onChange={updateUsername} />
            </p>
          </div>
        );
      }

      function updateUsername(event) {
        console.log(event);
        setState({
          username: event.target.value
        });
      }

      function increment() {
        setState({
          eventCount: state.eventCount + 1
        });
      }

      function setState(newState) {
        Object.assign(state, newState);
        renderApp();
      }

      function renderApp() {
        ReactDOM.render(<App />, document.getElementById('root'));
      }

      renderApp();
    </script>
  </body>
</html>

React 组件状态(7:09)

html 复制代码
<!DOCTYPE html>
<html lang="en">
  <body>
    <div id="root"></div>
    <script src="https://cdn.bootcss.com/react/16.2.0/umd/react.development.js"></script>
    <script src="https://cdn.bootcss.com/react-dom/16.2.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.bootcss.com/babel-standalone/7.0.0-beta.3/babel.js"></script>
    <script type="text/babel">
      class StopWatch extends React.Component {
        state = { lapse: 0, running: false };
        handleRunClick = () => {
          this.setState((state) => {
            if (state.running) {
              clearInterval(this.timer);
            } else {
              const startTime = Date.now() - this.state.lapse;
              this.timer = setInterval((state) => {
                this.setState({ lapse: Date.now() - startTime });
              });
            }
            return { running: !state.running };
          });
        };
        handleClearClick = () => {
          clearInterval(this.timer);
          this.setState({ lapse: 0, running: false });
        };
        render() {
          const { lapse, running } = this.state;
          const buttonStyle = {
            border: '1px solid #ccc',
            background: '#fff',
            fontSize: '2em',
            padding: 15,
            margin: 5,
            width: 200
          };
          return (
            <div style={{ textAlign: 'center' }}>
              <label style={{ fontSize: '5em', display: 'block' }}>{lapse}ms</label>
              <button style={buttonStyle} onClick={this.handleRunClick}>
                {running ? 'Stop' : 'Start'}
              </button>
              <button style={buttonStyle} onClick={this.handleClearClick}>
                Clear
              </button>
            </div>
          );
        }
      }
      ReactDOM.render(<StopWatch />, document.getElementById('root'));
    </script>
  </body>
</html>

React 用 componentWillUnmount 方法停止内存泄漏(1:14)

html 复制代码
<!DOCTYPE html>
<html lang="en">
  <body>
    <div id="root"></div>
    <script src="https://cdn.bootcss.com/react/16.2.0/umd/react.development.js"></script>
    <script src="https://cdn.bootcss.com/react-dom/16.2.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.bootcss.com/babel-standalone/7.0.0-beta.3/babel.js"></script>
    <script type="text/babel">
      class StopWatch extends React.Component {
        state = { lapse: 0, running: false, isShow: true };
        handleRunClick = () => {
          this.setState((state) => {
            if (state.running) {
              clearInterval(this.timer);
            } else {
              const startTime = Date.now() - this.state.lapse;
              this.timer = setInterval((state) => {
                this.setState({ lapse: Date.now() - startTime }, () => {
                  console.log(this.state.lapse);
                });
              });
            }
            return { running: !state.running };
          });
        };
        handleClearClick = () => {
          clearInterval(this.timer);
          this.setState({ lapse: 0, running: false });
        };
        handleShow = (event) => {
          this.setState({ isShow: event.target.checked });
        };
        componentWillUnmount() {
          // 注意释放,否则报错
          clearInterval(this.timer);
        }
        render() {
          const { lapse, running, isShow } = this.state;
          const buttonStyle = {
            border: '1px solid #ccc',
            background: '#fff',
            fontSize: '2em',
            padding: 15,
            margin: 5,
            width: 200
          };
          return (
            <div style={{ textAlign: 'center' }}>
              Show or hide ? <input type='checkbox' checked={isShow} onChange={this.handleShow} />
              {isShow ? (
                <div>
                  <label style={{ fontSize: '5em', display: 'block' }}>{lapse}ms</label>
                  <button style={buttonStyle} onClick={this.handleRunClick}>
                    {running ? 'Stop' : 'Start'}
                  </button>
                  <button style={buttonStyle} onClick={this.handleClearClick}>
                    Clear
                  </button>
                </div>
              ) : null}
            </div>
          );
        }
      }
      ReactDOM.render(<StopWatch />, document.getElementById('root'));
    </script>
  </body>
</html>

React Class(4:16)

html 复制代码
<!DOCTYPE html>
<html lang="en">
  <body>
    <div id="root"></div>
    <script src="https://cdn.bootcss.com/react/16.2.0/umd/react.development.js"></script>
    <script src="https://cdn.bootcss.com/react-dom/16.2.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.bootcss.com/babel-standalone/7.0.0-beta.3/babel.js"></script>
    <script type="text/babel">
      class Counter extends React.Component {
        state = { count: 0 };
        handleClick = () => {
          // 注意箭头函数写法,参数、返回值都带括号
          this.setState(({ count }) => ({
            count: count + 1
          }));
        };
        render() {
          return <button onClick={this.handleClick}>{this.state.count}</button>;
        }
      }
      ReactDOM.render(<Counter />, document.getElementById('root'));
    </script>
  </body>
</html>

评论

阅读上一篇

优化 React 性能
2017-12-13 10:13:24

阅读下一篇

Docker源国内加速
2017-12-11 23:37:24
0%