一、基本安装步骤
1、先安装Node.js2、国内使用 npm 速度很慢,你可以使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm
执行命令:npm install -g cnpm --registry=https://registry.npm.taobao.org
在使用 create-react-app my-app 来创建一个新的React应用,在拉取各种资源时,往往会非常慢,换成淘宝的资源
执行命令:npm config set registry https://registry.npm.taobao.org
3、使用 create-react-app 快速构建 React 开发环境
执行以下命令创建项目:
$ cnpm install -g create-react-app
$ create-react-app my-app
$ cd my-app/
$ cnpm start
4、Ant Design 安装(到指定项目目录下执行)
执行命令:npm install antd --save
注:如果你的网络环境不佳,推荐使用 cnpm
5、前台启动报错的时候:将项目里的node-module文件夹删掉,然后执行 cnpm install
执行完之后,再重新启动 cnpm start
二、学习 (链接:https://doc.react-china.org/docs/conditional-rendering.html)
1、注释:在标签内部的注释需要花括号;在标签外的的注释不能使用花括号
ReactDOM.render(
/*注释 */
<h1>孙朝阳 {/*注释*/}</h1>,
document.getElementById('example')
);
2、代码中嵌套多个 HTML 标签,需要使用一个标签元素包裹它。
3、原生 HTML 元素名以小写字母开头,而自定义的 React 类名以大写字母开头。
4、state 和 props 主要的区别在于 props 是不可变的,而 state 可以根据与用户交互来改变
三、React API
1、设置状态:setState
语法:setState(object nextState[, function callback])
参数说明:
nextState,将要设置的新状态,该状态会和当前的state合并
callback,可选参数,回调函数。该函数会在setState设置成功,且组件重新渲染后调用。
2、替换状态:replaceState
语法:replaceState(object nextState[, function callback])
参数说明:
nextState,将要设置的新状态,该状态会替换当前的state。
callback,可选参数,回调函数。该函数会在replaceState设置成功,且组件重新渲染后调用。
3、设置属性:setProps
4、替换属性:replaceProps
5、强制更新:forceUpdate
语法:forceUpdate([function callback])
参数说明:callback,可选参数,回调函数。该函数会在组件render()方法调用后调用。
6、获取DOM节点:findDOMNode
返回值:DOM元素DOMElement
7、判断组件挂载状态:isMounted
返回值:true或false,表示组件是否已挂载到DOM中
四、生命周期
componentWillMount 在渲染前调用,在客户端也在服务端。
componentDidMount : 在第一次渲染后调用,只在客户端。之后组件已经生成了对应的DOM结构,可以通过this.getDOMNode()来进行访问。 如果你想和其他JavaScript框架一起使用,可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异部操作阻塞UI)。
componentWillReceiveProps 在组件接收到一个新的prop时被调用。这个方法在初始化render时不会被调用。
shouldComponentUpdate 返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。
可以在你确认不需要更新组件时使用。
componentWillUpdate 在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。
componentDidUpdate 在组件完成更新后立即调用。在初始化时不会被调用。
componentWillUnmount在组件从 DOM 中移除的时候立刻被调用。