开始
首先确保自己已经安装好 node 环境或者 yarn 环境,并且最好已经为 npm 或 yarn 换好了源。
下面以 npm 为例。进入想要创建项目的目录,打开终端。输入:
npx create-react-app <name>
或:
npm install create-react-app -y #把脚手架安装在本地 create-my-app <name>
然后:
cd <name> npm start
JSX
react 中我们用标签来描述 js 的对象。它有些像 JavaScript,又有些像 XML,这种风格我们称为 JSX。
就像这样:
const element = <div>Hello, world!</div>;
然后我们用 ReactDOM 的 render 方法把 element 渲染到 DOM 树的 id 为 example 的节点上:
ReactDOM.render( element, document.getElementById('example') );
注意,JSX 中的多个子标签必须被一个闭合的父标签包裹,就像这样:
const element = <div> <h1>TITLE</h1> <div>hello~</div> </div>;
如果我们要往 JSX 中添加 JavaScript 代码,那么把代码用一对大括号包裹:
var x = 'xixi'; const element = <div> <h1>TITLE</h1> <div>hello~</div> <div>{x}</div> </div>;
当然,我们还能这么用:
const element = <button onClick={ () => alert('Hi~') }></button> // onClick 绑定了一个 ES6箭头函数
(本人暂时只会写 class-style 的 React,未来会补上 function + hooks)
React objects, props, state
React 的对象继承 React.Component 的接口,一般需要一个 render 方法来渲染对象本身。render 会在对象的 constructor 调用之后,以及对象每次调用 setState 方法之后被调用。
我们用类似 html 标签的方式把对象插入 DOM 树中,比如下面的代码,我们把<Hello Button /> 插入 DOM,在其闭合标签中用 name 来为其定义 props,并且在对象被点击的时候在 handleClick 里获取 this.props.name 来得到其 name 属性,显示在 alert 的对话框中。
在下面的代码中你可以看到:React 风格的 stylesheet,state、props的基础用法,以及 ES6的语法糖 var { a } = b,和 var a = b.a 等价。
class HelloButton extends React.Component { constructor(props) { super(props); this.state = { clicked: 0 }; this.myStyle = { 'height' : '40px', 'width' : '75px', 'positon' : 'relative', 'font-weight': 'bold', 'margin' : 'auto' }; } handleClick() { alert('Hello! ' + this.props.name); var { clicked } = this.state; ++clicked; this.setState({ clicked: clicked }); } render() { return ( <div> <button onClick={ this.handleClick.bind(this)} style={this.myStyle}> Click me </button> <div> I've been clicked { this.state.clicked } times. </div> </div> ); } } ReactDOM.render( <React.StrictMode> <HelloButton name='Jirachi' /> <App /> </React.StrictMode>, document.getElementById('root') );
我们需要非常万分注意的一点是,setState 是异步(asynchronous)的,我们在调用 setState 后,对象的 state 并不会立刻刷新,如果我们要获取实时的信息,在 setState 的第二个参数中填入回调函数(callback function)即可。
像这样:
this.setState({ clicked: clicked }, () = > alert(this.state.clicked));
用数组来创建列表
var array = [1, 1, 4, 5, 1, 4]; array.map(items => <li>{items}</li>);
之后 array 就会被转换成一个 JSX 对象了。如果我们要利用上索引,那么可以这样改动:
var array = [1, 1, 4, 5, 1, 4]; array.map((items, index) => { return ( <li id={`${index}`}>{items}</li> ); });
用上面的知识做的一个 To-do list 小 demo:


代码:
https://github.com/Endsieg77/to-do-list
React 生命周期

React Hooks
基础 function hooks
// react.js 的 function hooks 定义方法如下: function componentName() { const [state, setterOfState] = useState(initialVal); // 其中 state 是变量名,setterOfState 是一个函数。 // 用来修改 state 的值,initialValue 设置 state 的初值。 useEffect( callback , [triggers]); // callback 为回调函数,触发条件是 triggers 发生改变, // callback 可以有返回值,如果返回值是一个函数,那么函数将会在组件更新之前被调用。 // 这个函数我们一般称为清理函数(Cleanup Function) // triggers 可以不用填,默认为所有 state 变量。 }
Function Hooks 组件的生命周期:
组件挂载 –> 执行副作用 –> 组件更新 –> 执行清理函数 –> 执行副作用 –> 组件更新 –> 执行清理函数 –> 组件卸载
function hooks 的复用性
我们之所以逐步转向 function hooks,甚至未来的 React 可能考虑 deprecate class-style,有一个重要原因就是 function hooks 具有较强的可复用性。
考虑以下代码:
function useCount(number) { const [color, setColor] = useState(0); useEffect(() => { setColor(number % 2); }); return color; } function App() { const [number, setNumber] = useState(0); const [test, setTest] = useState('a'); const color = useCount(number); const myStyle = { 'background-color': color ? 'red' : 'blue', 'color': 'aliceblue', 'cursor': 'pointer' }; useEffect(() => { document.title = `clicked ${number + test} times` }); return ( <div> <p>{`${number} ${test}`}</p> <button style={myStyle} onClick={() => setNumber(number + 1)}>Click</button> <button onClick={() => setTest(test + 'a')}>Change test</button> </div> ); }
function hooks 的嵌套允许我们复用具有相似行为的组件,而在编写 class-style 的时候,即使是经验老道的 React User 也难以避免大量重复的逻辑(这一点我在写上面那个 To-Do List 的时候深有体会)。