React

useState实现 function useState(initialValue) { var _val = initialValue; function state(){ return _val; } function setState(newVal){ _val = newVal; } return [state, setState]; } 使用 var [foo, setFoo] = useState(0) // 数组解构 console.log(foo()); //output: 0 setFoo(1); console.log(foo()); //output: 1 在函数组件中使 …

version1: jsx const element = <h1 title="foo">Hello</h1>; const container = document.getElementById('root'); ReactDOM.render(element, container); version2: React.createElement const element = React.createElement( "h1", { title: "foo"}, "Hello" ); …

创建项目 $ npx create-react-app react-try 情景一：shouldComponentUpdate Child.js import React from 'react'; class Child extends React.Component { constructor(props) { super(props); } componentDidMount() { console.log('child did mount'); } componentWillUnmount() { console.log('child will …

1、 import React from "react"; export default class App extends React.Component { innerClick = () => { console.log("A: react inner click."); }; outerClick = () => { console.log("B: react outer click."); }; componentDidMount() { …

1、在构造函数中绑定事件 class Item extends React.Component { constructor(props) { super(props); this.state = { number: 0, }; this.handleClick = this.handleClick.bind(this); } handleClick() { console.log('click'); this.setState({ number: this.state.number + 1, }); } render() { return ( <div> …

看代码 import React, { useState } from 'react'; // 计算斐波那契数 const fibc = n => { console.log('calculate...'); if (n <= 2) { return 1; } return fibc(n - 1) + fibc(n - 2); }; const Fibc = props => { let [number, setNumber] = useState(1); let [count, setCount] = useState(0); // …

设置行内样式 1、使用行内 style 样式 import React from 'react'; const Home = props => { const name = 'Home Page'; return ( <div style={{ backgroundColor: '#ddd', color: 'red', fontSize: '30px', paddingLeft: '20px', }}> { name } </div> ); }; export …

代码 1、安装 $ npm install react-router-dom 2、创建多页面 文件结构： /src /views /blog detail.js list.js about.js home.js app.js index.js home.js import React from 'react'; const Home = props => { return <div>Home Page</div>; }; export default Home; about.js import React from 'react'; …

添加 .css 文件 1、安装 css-loader/style-loader $ npm install --save-dev css-loader style-loader 2、更新 webpack.config.js module.exports = { module: { rules: [ { test: /\.css$/i, use: ['style-loader', 'css-loader'], }, ], }, }; 3、创建 base.css 文件 /src /assets /styles base.css base.css body { …

安装 $ npm install --save-dev --save-exact prettier 创建一个空的配置文件 $ echo {}> .prettierrc.js 配置.prettierrc.js module.exports = { arrowParens: "avoid", bracketSpacing: true, printWidth: 100, semi: true, singleQuote: true, tabWidth: 2, trailingComma: "all", jsxSingleQuote: false, …